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 协议》，转载必须注明作者和本文链接