样式处理

PostCSS
是一个编译插件的容器。他的工作模式是接收样式源代码并交由编译插件处理，最后输出CSS。开发者可以自己制定使用哪些插件来实现特定的功能。
postcss-loader 可以将postcss与webpack连接起来

单独使用postcss-loader时不建议使用css中的@import语句，否则胡产生冗余代码，官方还是推荐将post-css-loader放在css-loader之后使用。
post-css-loader必须要有一个单独的配置文件，需要在根目录下创建一个postcss.config.js

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

npm install autoprefixer
//postcss.config.js中
const autoprefixer = require('autoprefixer')
module.exports = {
  plugins: [
    autoprefixer({
      grid: true,
      overrideBrowserslist: [
        '> 1%',
        'last 3 versions',
        'android 4.2',
        'ie 8'
      ]
    })
  ]
}

stylelint
是一个css的质量检测工具，可以为其添加各种规则，来统一项目的代码风格，确保代码质量
他可以检测出代码中的样式问题（预发错误、重复的属性等），帮助我们写出更加安全并且风格更加一致的代码。

npm install stylelint
//postcss.config.js中
const autoprefixer = require('autoprefixer')
const stylelint = require('stylelint')
module.exports = {
  plugins: [
    autoprefixer({
      grid: true,
      overrideBrowserslist: [
        '> 1%',
        'last 3 versions',
        'android 4.2',
        'ie 8'
      ]
    }),
    stylelint({
      config: {
        rules: {
          'declaration-no-important': true
        }
      }
    })
  ]
}
打包时会报错，如果使用!important
(2:15) stylelint: Unexpected !important (declaration-no-important)
 @ ./src/style/test.css 2:12-135 9:17-24 13:15-29
 @ ./src/index.js 2:0-26

CSSNext
PostCSS可以与CSSNEXT结合使用，让我们在应用中使用最新的CSS语法特性

npm install postcss-cssnext

const autoprefixer = require('autoprefixer')
const stylelint = require('stylelint')
const postcssCssnext = require('postcss-cssnext')
module.exports = {
  plugins: [
    autoprefixer({
      grid: true,
      overrideBrowserslist: [
        '> 1%',
        'last 3 versions',
        'android 4.2',
        'ie 8'
      ]
    }),
    stylelint({
      config: {
        rules: {
          'declaration-no-important': true
        }
      }
    }),
    postcssCssnext({
      overrideBrowserslist: [
        '> 1%',
        'last 2 versions'
      ]
    })
  ]
}

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

CSS Modules
把css模块化，让css也拥有模块的特点

每个css文件中的样式都拥有单独的作用域，不会和外界发生命名冲突
对css进行依赖管理，可以通过相对路径引入css文件
可以通过composes轻松复用其他CSS模块

test: /\.css$/,
      use: ['style-loader',
        {
          loader: 'css-loader',
          options: {
            modules: {
              auto: true,
              localIdentName: '[name]_[local]_[hash:base64:5]'
            }
          }
        }, 'postcss-loader'],

 {
                    //解析器的执行顺序是从下往上(先css-loader再vue-style-loader)
                    test: /\.css$/,
                    use: [
                        process.env.NODE_ENV !== 'production'
                            ? 'vue-style-loader'
                            : MiniCssExtractPlugin.loader,  //prod CSS被提取出来打包
                        {
                            loader: 'css-loader',
                            options: {
                                modules:{
                                    auto:false,//modules 开关,移动端多页面模式关闭class hash命名
                                    localIdentName: '[local]_[hash:base64:8]',// 自定义生成的类名
                                }
                            }
                        }
                    ]
                },

通过SCSS、Less等预编译样式语言来提升开发效率，降低代码复杂度，通过PostCSS包含的多功能强大的插件，可以让我们使用更新的CSS特性，保证更好的浏览器兼容性，通过CSS Modules可以让css模块化，避免样式冲突。