安装 css-loader 和 style-loader

在开发 Web 应用时，使用 CSS 是非常常见的。而在使用 CSS 文件时，需要将其导入到 JavaScript 中才能使用它们。css-loader 和 style-loader 提供了一种便捷的方式来实现这一操作。

安装

使用 npm 可以简单地安装这两个加载器：

npm install --save-dev css-loader style-loader

使用

将以下样式应用于一个 HTML 元素：

.text {
  color: red;
}

要使用这个 CSS 文件，我们需要做两件事：1）使用 css-loader 将 CSS 模块导入到 JavaScript 模块中；2）使用 style-loader 将 CSS 添加到 DOM 树中。

import './styles.css';

// ...

return (
  <div className="text">Hello, world!</div>
);

在上面的代码中，我们首先将 CSS 模块导入到了 styles.css 文件中，然后使用 className 属性将其应用于 div 元素。由于我们使用了 style-loader，所以 CSS 将自动添加到 DOM 树中。

配置

css-loader 和 style-loader 有许多可配置选项，这些选项可以用来控制它们的行为。

以下是一些可用的选项：

• modules：启用 CSS 模块支持；
• url：启用/禁用 URL 转换；
• import：启用/禁用 @import 支持；
• sourceMap：启用/禁用生成源映射；
• minimize：启用/禁用 CSS 最小化；
• extract：启用/禁用 CSS 提取。

要配置这些选项，您可以将它们传递给 css-loader 或 style-loader 的 options 选项，如下所示：

import styles from './styles.css';

// ...

return (
  <div className={styles.text}>Hello, world!</div>
);

在上面的代码中，我们使用了 css-loader 的 modules 选项启用了 CSS 模块，然后使用了 style-loader 将 CSS 添加到 DOM 树中。

其他选项也可以以类似的方式进行配置。