less-loader

用于将 less 转换成 css

yarn add less less-loader --dev

browserslistrc文件

用于配置兼容的浏览器。

> 0.01% 
last 2 version
not dead
ie >= 8
Firefox >= 3.5
chrome  >= 35
opera >= 11.5

postcss-loader

用于处理 css 兼容性。需要配合安装插件或者插件集合。

yarn add postcss-loader postcss-preset-env --dev

postcss-loader 可以自定义配置文件。默认配置文件名 postcss.config.js。

module.exports = {
  plugins: [
    require('postcss-preset-env')
    // require('autoprefixer')
  ]
}

importLoaders属性

如果样式文件里面有 @import 语句，postcss-loader 无法处理 import 的文件的兼容性。之后的 css-loader 可以加载 @import ，但是 postcss-loader 在 css-loader 之前已经完成了工作，所以 css-loader 需要配置成可以把处理后的样式往回交给前面的 postcss-loader 让它再次处理，配置 importLoaders 属性就可以实现。importLoaders 属性赋值是一个数字，表示需要往回加载多少个插件，1代表往回加载一个 loader，0代表不往回加载（即和不配置 importLoaders 一样）。

// css 配置
{
        test: /\.css$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1
            }
          },
          'postcss-loader'
        ]
      },