本文介紹了詳解webpack之scss和postcss-loader的配置，分享給大家，具體如下：
開始
npm i sass-loader node-sass postcss-loader autoprefixer
首先配置postcss-loader
在這里postcss是為了來給瀏覽器內核添加私有前綴。當前postcss還有其他操作比如px2rem之類的。可以把postcss想象成babel-core只是一個控制中心，主要的還是它分散出來的插件。
/**** package.json ****/// 指定你的前綴的兼容版本。// 目前指定的只添加-webkit-, -ms-// 你也可以兼容更低或者更高的的瀏覽器來增加或減少內核前綴的數量。"browserslist": [ "> 1%", "last 2 versions", "not ie <= 8"]/**** .postcssrc.js ****/// 增加一個.postcssrc.js來指定postcss所使用的插件。就跟.babelrc類似module.exports = { plugins:{ "autoprefixer": {} }}/**** build.js生產環境 ****/{ test: //.css$/, use: ExtractTextWebpackPlugin.extract({ fallback: 'style-loader',- use: 'css-loader'+ use: ['css-loader', 'postcss-loader', 'sass-loader'] }) }/**** dev.js開發環境 ****/// 其實個人認為在開發環境可加可不加{ test: //.css$/, use: ['style-loader', 'css-loader', 'postcss-loader']},scss的配置
無非就是增加規則
/**** build.js ****/{ test: //.scss$/, use: ExtractTextWebpackPlugin.extract({ fallback: 'style-loader', use: ['css-loader', 'postcss-loader', 'sass-loader'] })}/**** dev.js ****/{ test: //.scss$/, use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader']}以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
