postcss-loader

• 作用：将css3转为低版本浏览器兼容写法，及兼容未来版本的css写法
  
• step1:安装包

npm i postcss-loader postcss-cssnext -D

• step2: webpcak.config.js

  module: {
    rules: [
      {
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader', 'postcss-loader' ], 
        exclude: /node_modules/
      }
    ]
  }

• step3: 根目录创建配置文件 postcss.config.js

module.exports = {
  plugins: { // 此处不可以使用数组形式
    'postcss-cssnext': {},
    // 'cssnano': {} // 压缩css 需安装npm i cssnano -D
  }
}

sass-loader

• 作用：解析转义sass文件样式

$variable: aqua;
html{
  background: darkgreen;
  .box1{
    width: 100px;
    height: 100px;
    background: $variable;
  }
}

• use step1: install package

  推荐使用cnpm安装，其他方式安装node-sass不稳定
  cnpm i node-sass sass-loader -D 

• use step2 : webpack.config.js

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

less

• 作用：解析转义less文件样式

@variable: aqua;
html{
  background: darkgreen;
  .box1{
    width: 100px;
    height: 100px;
    background: @variable;
  }
}

• step1: install

  npm i less less-loader -D

• step2 : webpack.config.js

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

extend 1

• sass和less在同一个项目中可以共存，在webpack.config.js中分别配置即可

• css文件中不能用//进行注释，在scss和less文件中可以用//。但打包时//注释的代码会被忽略。

  
  

extend 2 mini-css-extract-plugin

• effect：该插件作用，将css文件提取出来，以link方式插入html。

暂未找到该插件的使用场景，直接用style-loader以style的形式插入html即可

• usage
• step1: install

npm i mini-css-extract-plugin -D

• step2: configure the webpack.config.js

var MiniCssExtractPlugin = require('mini-css-extract-plugin');
module: {
  rules: [
    {
      test: /\.css/,
      use: [MiniCssExtractPlugin.loader, 'css-loader', "postcss-loader" ]
    }
  ]
},
plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css'
    }),
]