css-loader将CSS文件变成commonJS模块，加载到JS中
style-css通过附加style标签的方式引入样式
less-loader和less 将less文件编译为css文件
less-loader只起到粘合作用;
less是真正用来编译SCSS的
sass-loader和node-sass将SCSS语法编译为CSS
sass-loader只起到粘合作用
node-sass是真正用来编译SCSS的
mini-css-extract-plugin用于提取样式到CSS文件

Sass与SCSS

Sass是对CSS的语法增强，其后缀名为.scss。
sass-loader将SCSS语法编译为CSS，因此在使用时还需要搭配css-loader和style-loader。sass-loader只是编译核心库与Webpack的连接器，起到粘合作用，需要搭配node-sass使用，node-sass是真正用来编译SCSS的。
按装node-sass时可能会超时，设置一个cnpm的镜像地址

npm config set sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
npm install sass-loader node-sass

Less

PostCSS

PostCSS是一个编译插件的容器。它接受样式源代码，并交由编译插件处理，最后输出CSS。

postcss-loader

推荐将pstcss-loader放在css-loader之后使用

npm -i postcss-loader -D

自动前缀Autoprefixer

npm i autoprefixer -D

postcss.config.js中添加autoprefixer

const autoprefixer = require('autoprefixer')
module.exports = {
  plugins: [
    autoprefixer({
      // 支持的特性
      grid: true,
    }),
  ],
}

兼容浏览器在package.json中配置

{
    "browserslist": {
    "development": [
      "last 1 chrome version"
    ],
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ]
  },
}

stylelint

npm i stylelint -D

const stylelint = require('stylelint')
module.exports = {
  plugins: [
    stylelint({
      config: {
        rules: {
           'declaration-no-important': true,
        },
      },
    }),
   ]
}

CSSNext

支持使用最新的CSS语法特性，PostCSS会把CSSNext的语法翻译为浏览器能够接受的属性和形式。

npm i postcss-cssnext -D

const autoprefixer = require('autoprefixer')
module.exports = {
  plugins: [
    postcssCssnext({
      // 兼容浏览器
      browsers: ['> 1%', 'last 2 version'],
    }),
  ],
}

mini-css-extract-plugin

用于提取样式到CSS文件，支持按需加载CSS

样式处理