本文介绍了详解webpack之scss和postcss-loader的配置，分享给大家，具体如下：
开始
首先配置postcss-loader
在这里postcss是为了来给浏览器内核添加私有前缀。当前postcss还有其他操作比如px2rem之类的。可以把postcss想象成babel-core只是一个控制中心，主要的还是它分散出来的插件。
rush:js;">
/**** 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的配置
无非就是增加规则
rush:js;">
/**** build.js ****/
{
test: /\.scss$/,use: ['css-loader','sass-loader']
})
}
/**** dev.js ****/
{
test: /\.scss$/,'sass-loader']
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
