详解webpack之scss和postcss

详解webpack之scss和postcss

本文介绍了详解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": {http://}

}

}

/**** 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',eTCalD '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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。