css-loader

来看下面这一组 webpack 的配置项,

{
test: /\.less$/,
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
modules: true, // 开启 css 模块化
importLoaders: 2,
},
},
{
loader: require.resolve('postcss-loader'),
options: {...},
},
{
loader: require.resolve('less-loader'),
options: {...},
},
],
},

它们执行顺序是 less-loaderpostcss-loadercss-loaderstyle-loader。我们来理一下各 module 的作用:

  • less-loader: 将 less 解析为 css
  • postcss-loader: 将 css 兼容各浏览器加上相应前缀
  • css-loader: 将 css 转化为 common.js 模块
  • style-loader: 将 common.js 模块注入 style 标签中

Link issue