webpack 学习笔记:引入 CSS(下)
上篇文章讲述如何在 webpack 中处理 .css 文件资源。接下来,更深入一点,介绍如何在 webpack 使用预处理器 SCSS,以及为兼容浏览器提供 CSS 属性前缀。会涉及到两个 loader 的使用:scss-loader、postcss-loader。
sass-loader
首先安装依赖:
npm install sass-loader sass webpack --save-dev
在 webpack.cnofig.js 中添加配置:
{
module: {
rules: [
{
test: /\.(c|sa|sc)ss$/i,
use: [
'style-loader',
'css-loader',
'sass-loader'
]
]
}
}
这样简单的配置就可以了。这里处理包括 .css、.sass 和 .scss 为后缀的所有文件。
postcss-loader
首先安装依赖:
npm install --save-dev postcss-loader postcss
配置文件:
{
test: /\.(c|sa|sc)ss$/i,
use: [
'style-loader',
'css-loader',
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [
[
'postcss-preset-env',
{
browsers: 'defaults, ie >= 10'
},
],
],
},
}
},
'sass-loader'
]
}
注意,这里的 postcss 是放在 sass-loader 之后处理的,我们要求兼容 IE10 以上浏览器。
如果项目中使用了如下的代码:
// style.sass
.hello
display: flex;
justify-content: center;
align-items: center;
color: blue
经过处理后,输出结果如下:
.hello {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center;
color: blue
}
(完)
本作品采用《CC 协议》,转载必须注明作者和本文链接