webpack5 学习 3 -- 解析 CSS Less

解析 CSS

加载依赖插件

npm i css-loader style-loader -D

css-loader 用于加载 .css 文件， 并且转换成 commonjs 对象

style-loader 将样式通过 标签插入到 head 中

添加 loader

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

这边特别说明下， loader 是链式调用， 顺序是从右到左的， 所以先调用的， 放下面

解析 Less

加载依赖插件

npm i less less-loader -D

添加 loader

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

Saas 与 Less 类似