css-loader 用法及作用

lxdll
1,076 阅读2分钟

The css-loader interprets @import and url() like import/require() and will resolve them.

Github: css-loader

解析 @import 和 url() 的语法，然后将 css 拼接为字符串，最后用 ES module 导出。

下面从实际例子看下 css-loader 的输出：

webpack version: 5.88.1

css-loader: 6.8.1

style-loader: 3.3.3

// test.css
@import './b.css';
@import './c.css';

#root {
  font-size: 30px;
  color: red;
}

// b.css
.b {
  display: flex;
  transition: all 2s ease;
}

// c.css
.c {
  display: block;
}

我们在打包的入口文件引入了 test.css，然后 test.css 文件引入了 b.css 和 c.css 文件，最后我们看下 css-loader 的输出：

// Imports
import ___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___ from "../node_modules/css-loader/dist/runtime/noSourceMaps.js";
import ___CSS_LOADER_API_IMPORT___ from "../node_modules/css-loader/dist/runtime/api.js";
import ___CSS_LOADER_AT_RULE_IMPORT_0___ from "-!../node_modules/css-loader/dist/cjs.js!./b.css";
import ___CSS_LOADER_AT_RULE_IMPORT_1___ from "-!../node_modules/css-loader/dist/cjs.js!./c.css";

var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___);
___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___);
___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_1___);
// Module
___CSS_LOADER_EXPORT___.push([module.id, `#root {\n  font-size: 30px;\n  color: red;\n}`, ""]);

// Exports
export default ___CSS_LOADER_EXPORT___;

其实最后 css-loader 输出的是一串字符串，上面我把格式解析了下，可以看到我们的 css 代码拼接成了字符串，然后加到了 __CSS_LOADER_EXPORT__ 中，最后用 ES module 导出。然后 test.css 中导出的 b.css 和 c.css 文件，使用 webpack loader 的内联语法 处理了。

css-loader 的输出之后会由 style-loader 处理，最后将样式默认以 <style></style> 标签的方式插入到 <head> 标签中，多个样式文件对应多个 style 标签。

importLoaders 配置

当遇到 @import 语法，CSS modules and ICSS imports 时，默认会用 css-loader 处理，在 css-loader 前执行的 loader 就不会再回头执行了，如果配置了 importLoaders number类型，例如配置了 n，就会用 css-loader 前的 n 个 loader 去处理，然后再用 css-loader 处理。

下面我们演示下具体的例子：

// webpack.config.js
module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader', 
          {
            loader: 'css-loader',
            options: { importLoaders: 1 },
          },
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  [
                    "autoprefixer",
                  ],
                ],
              },
            },
          }
        ]
      }
    ]
  }

当我们以上面的 webpack 配置进行打包时，我们查看打包产物 bundle.js：

image.png 我们发现对于使用 @import 导入的 b.css 和 c.css 文件，使用了 css-loader 和 postcss-loader 来处理。

如果将 importLoaders 配置注释掉，我们再看：

image.png 会发现只会使用 css-loader 去处理这两个文件。

这样就体现了 importLoaders 配置的用法和作用。

仅供参考

avatar
文章
阅读
粉丝