08CSS预处理器

正题:CSS预处理器

Sass 和 Less 之类的预处理器是对原生CSS的拓展，它们允许你使用类似于variables, nesting, mixins, inheritance等不存在于CSS中的特性来写CSS，CSS预处理器可以这些特殊类型的语句转化为浏览器可识别的CSS语句，

你现在可能都已经熟悉了，在webpack里使用相关loaders进行配置就可以使用了，以下是常用的CSS 处理loaders:

• Less Loader
• Sass Loader
• Stylus Loader

不过其实也存在一个CSS的处理平台-PostCSS，它可以帮助你的CSS实现更多的功能，在其官方文档https://github.com/postcss/postcss可了解更多相关知识。

举例来说如何使用PostCSS，我们使用PostCSS来为CSS代码自动添加适应不同浏览器的CSS前缀。

首先安装postcss-loader 和 autoprefixer（自动添加前缀的插件）

      npm install --save-dev postcss-loader autoprefixer

  

接下来，在webpack配置文件中添加postcss-loader，在根目录新建postcss.config.js,并添加如下代码之后，重新使用npm start打包时，你写的css会自动根据Can i use里的数据添加不同前缀了。

      //webpack.config.js
      module.exports = {
          ...
          module: {
              rules: [
                  {
                      test: /\.css$/,
                      use: [
                          {
                              loader: "style-loader"
                          }, {
                              loader: "css-loader",
                              options: {
                                  modules: true
                              }
                          }, {
                              loader: "postcss-loader"
                          }
                      ]
                  }
              ]
          }
      }
      // postcss.config.js
          module.exports = {
              plugins: [
                  require('autoprefixer')
              ]
          }


  

至此，本文已经谈论了处理JS的Babel和处理CSS的PostCSS的基本用法，它们其实也是两个单独的平台，配合webpack可以很好的发挥它们的作用。接下来介绍Webpack中另一个非常重要的功能-Plugins