本文介绍了详解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'] }
github
到此这篇关于详解webpack之scss和postcss-loader的配置就介绍到这了。不要为失去的事物后悔,这是一种无比豁达的心态,过去的事情就让他过去把。更多相关详解webpack之scss和postcss-loader的配置内容请查看相关栏目,小编编辑不易,再次感谢大家的支持!