前端之家收集整理的这篇文章主要介绍了
详解webpack之scss和postcss-loader的配置，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
@H_301_0@本文介绍了详解webpack之scss和postcss-loader的配置，分享给大家，具体如下：
@H_
301_0@
开始
<div class="jb51code">
<pre class="brush:bash;">
npm i sass-loader node-sass post
css-loader autoprefixer
添加-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','post
css-loader','sass-loader']
})
}
/**** dev.js开发环境 ****/
// 其实个人认为在开发环境可加可不加
{
test: /\.css$/,use: ['style-loader','
css-loader','post
css-loader']
},
css-loader','sass-loader']
})
}
/**** dev.js ****/
{
test: /\.scss$/,'sass-loader']
}
