webpack项目轻松混用css module的方法

下面是关于“webpack项目轻松混用css module的方法”的详细攻略。

什么是CSS Module？

CSS Module 是一种用于应对 CSS 样式作用域相互污染的方案，在 css-loader 中提供了对 CSS Module 的支持。通过 CSS Module，我们可以将 CSS 样式文件的类名等变量转换为局部作用域的值，从而实现组件级别的样式隔离。

如何在 Webpack 项目中使用 CSS Module？

在 Webpack 项目中使用 CSS Module，我们需要首先安装并配置 webpack 和 css-loader：

1. npm install webpack css-loader style-loader。
2. 在 webpack 的配置文件中配置 css-loader, 以启用 CSS module 的支持：

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", {
          loader: "css-loader",
          options: {
            modules: {
              localIdentName: "[name]-[local]-[hash:base64:5]",
            },
          },
        }],
      },
    ],
  },
};

其中，

• style-loader：将 CSS 加载到 DOM 中的样式加载器。
• css-loader：将 CSS 转换为 JavaScript 模块的加载器。
• options.modules：启用 CSS Module 支持的选项。

• localIndetName：配置类名的格式，"[name]-[local]-[hash:base64:5]" 表示类名格式为 "<文件名>-<局部类名>-"。

• 在组件中使用 CSS Module，就可以在 CSS 样式文件中定义局部变量了。例如：

/* demo.module.css */
.myClass {
    color: red;
}

如何混用 CSS Module 和全局样式？

在某些情况下，需要混用 CSS Module 和全局 CSS 样式。例如，可能需要使用一些已经定义好的第三方库 CSS 样式，或者使用全局样式定义一些全局的样式变量等。

在 Webpack 项目中可以轻松混用全局样式和 CSS Module。

常规 CSS 和 CSS Module 共存

在常规样式和 CSS Module 混用的情况下，我们需要将常规样式定义为全局样式，以便在局部样式中使用。例如：

/* global.css */
.error {
    color: red;
}

/* demo.module.css */
.myClass {
    composes: error;
    font-size: 18px;
}

此时，demo.module.css 中的 .myClass 类名会继承 global.css 中定义的 .error 样式。

SASS 和 CSS Module 共存

如果我们在 Webpack 项目中使用了 SASS，可以通过在 SASS 中引用 CSS Module 的方式来混用全局 CSS 样式和 CSS Module。例如：

/* demo.module.scss */
$primaryColor: red; // 定义局部变量

.appWrap{
    border: 1px solid $primaryColor; // 使用局部变量
    padding: 20px;
    .center {
        margin: 0 auto;
        .btn {
            composes: global.btn;
            background-color: $primaryColor; // 继承全局样式
            color: #fff;
            padding: 6px 12px;
            border: none;
        }
    }
}

在上述代码中，我们首先定义了 SASS 局部变量 $primaryColor，然后在样式中使用它。此时，我们可以通过 composes: global.<className> 的方式引用全局样式。

这就是关于“webpack项目轻松混用css module的方法”的详细攻略。如果还有疑问，请随时追问哦！