Webpack入门，样式预处理

样式预处理指的是开发者在开发过程中经常会使用一些样式预编译语言，如SCSS、Less等，在项目打包过程中再将这些预编译语言转换成CSS。借助这些语言强大和便捷的特性，可以降低项目的开发和维护成本。

Sass与SCSS

Sass本身是对CSS的语法增强，它有两种语法，现在使用更多的是SCSS（对CSS 3的扩充版本）。

sass-loader就是将SCSS语法编译为CSS，因此在使用时通常还要搭配css-loader和style-loader。loader本身只是编译核心库与Webpack的连接器，因此在项目工程中除了sass-loader以外还要安装sass，sass是真正用来编译scss的，而sass-loader只是起到粘合的作用。

安装命令如下：

npm install sass-loader sass -D

接着在Webpack配置中添加处理SCSS文件规则。

// webpack.config.js
module.exports = {
  ...
  module: {
    rules: [{
      test: /\.scss$/,
      use: ['style-loader','css-loader','sass-loader']
    }]
  }
}

之后就可以在项目工程中新建scss文件，使用scss语法了。

温馨提示
如果想在浏览器的调试工具里查看源码，需要分别为sass-loader和css-loader单独添加source-map的配置项。

Less同样是对CSS的一种扩展。与SCSS类似，它也需要安装loader和其本身的编译模块。安装命令如下：

npm install less-loader less -D

Less在配置上也与SCSS十分类似。

// webpack.config.js
module.exports = {
  ...
  module: {
    rules: [{
      test: /\.less$/,
      use: ['style-loader','css-loader','less-loader'],
    }]
  }
}

PostCSS

严格来说，PostCSS并不能算是一个CSS的与编译器，它只是一个编译插件的容器。它的工作模式是接收样式源代码并交由编译插件处理，最后输出CSS文件。开发者可以自己指定使用哪些插件来实现特定的功能。

使用post-loader可以轻松地将PostCSS与Webpack连接起来。安装命令如下：

npm install post-loader postcss -D

// webpack.config.js
module.exports = {
  ...
  module: {
    rules: [{
      test: /\.css$/,
      use: ['style-loader','css-loader','postcss-loader'],
    }]
  }
}

温馨提示
postcss-loader可以与css-loader结合使用，也可以单独使用，也就是说不配置css-loader也可以达到相同的效果。唯一不同的是，单独使用postcss-loader时不建议使用CSS中的@import语句，否则会产生冗余的代码，因此官方推荐将postcss-loader放在css-loader之后使用。

除此之外，PostCSS要求必须有一个单独的配置文件，因此需要在项目的根目录下创建一个postcss.config.js文件。

PostCSS一个最广泛的应用场景就是与Autoprefixer结合，为CSS自动添加厂商前缀。Autoprefixer是一个样式工具，可以根据caniuse.con上的数据，自动决定是否要为某一特性添加厂商前缀，并且可以由开发者为其指定支持浏览器的范围。

安装命令如下：

npm install autoprefixer -D

在postcss.config.js中添加autoprefixer。

// postcss.config.js
module.exports = {
  plugin: [
    autoprefixer({
      grid: true,
      browsers: [
        '>1%',
        'last 3 versions',
        'android 4.2',
        'ie 8'
      ]
    })
  ]
}

开发者可以在autoprefixer中添加需要支持的特性（如grid）以及兼容哪些浏览器。配置好之后，开发者就可以使用一些较新的CSS特性。

.container {
  display: grid;
}

// 由于在上面的配置中指定了grid:true，也就是为grid特性添加IE前缀，经过编译后则会成为

.container {
  display: -ms-grid;
  display: grid;
}

stylelint

stylelint是一个CSS的质量检测工具，就像eslint一样，开发者可以为其添加各种规则，来统一项目的代码风格，确保代码质量。

安装命令如下：

npm install stylelint -D

在postcss.config.js中添加相应配置。

// postcss.config.js
const stylelint = require("stylelint");
module.exports = {
  plugin: [
    stylelint({
      config: {
        rules: {
          'declaration-no-important': true,
        }
      }
    })
  ]
}

上面的配置添加了declaration-no-important这样一条规则，即当代码中出现“!important”时就会给出警告。

CSSNext

PostCSS可以与CSSNext结合使用，让开发者在应用中使用最新的CSS语法特性。

安装命令如下：

npm install postcss-cssnext -D

在postcss.config.js中添加相应配置。

// postcss.config.js
const postcssCssnext = require('postcss-cssnext');
module.exports = {
  plugins: [
    postcssCssnext({
      browsers:[
       '>1%',
       'last 2 versions',
      ]
    })
  ]
}

制定好需要支持的浏览器之后，开发者就可以顺畅地使用CSSNext的特性了。PostCSS会帮助开发者把CSSNext的语法翻译为浏览器能接收的属性和形式。

:root {
  --highlightColor: hwb(190,35%,20%);
}
body {
  color: var(--highlightColor);
}

// 打包后的结果

body{
  color: rgb(89,185,204);
}

原创文章，作者：ZERO，如若转载，请注明出处：https://www.edu24.cn/course/webpack-style-preprocessing.html

Webpack入门，样式预处理

Sass与SCSS

PostCSS

stylelint

CSSNext

相关推荐