CSS Modules 是一种与框架无关的技术，然而不同的前端框架（如 React、Vue、Angular）对它的使用方式会有所不同。下面分别讲解如何在这几个框架中使用 CSS Modules。
1. React 中使用 CSS Modules
React 是 CSS Modules 最常用的框架之一，它支持组件化开发，可以很方便地将样式与组件进行封装。
安装依赖：
首先，在 React 项目中使用 CSS Modules，通常需要安装 css-loader 和 style-loader（如果使用 Webpack）。
npm install --save-dev css-loader style-loader
配置 Webpack：
在 Webpack 中配置 CSS Modules，通常需要针对 .module.css 文件进行特别处理：
module: {rules: [{test: /\.module\.css$/,use: ['style-loader', 'css-loader?modules'],},{test: /\.css$/,exclude: /\.module\.css$/,use: ['style-loader', 'css-loader'],},],
}
使用 CSS Modules：
- 创建一个
Button.module.css文件：
css">/* Button.module.css */
.button {background-color: blue;color: white;padding: 10px;
}
- 在 React 组件中导入并使用样式：
import React from 'react';
import styles from './Button.module.css';const Button = () => {return <button className={styles.button}>Click Me</button>;
};export default Button;
在这里，styles.button 会被转换为一个唯一的类名（例如 Button_button__1a2b3），从而避免样式冲突。
使用 classnames 动态组合类名
React 项目中常会根据不同状态动态切换样式。classnames 是一个常用工具库。
npm install classnames
import classNames from 'classnames';
import styles from './Button.module.css';
const Button = ({ isPrimary, isDisabled, children }) => {const buttonClass = classNames({[styles.primary]: isPrimary,[styles.secondary]: !isPrimary,[styles.disabled]: isDisabled,});
return <button className={buttonClass}>{children}</button>;
};
2. Vue 中使用 CSS Modules
Vue 支持 CSS Modules，可以在 Vue 单文件组件（SFC）中使用。
安装依赖：
在 Vue 项目中，首先需要安装 css-loader 和 vue-loader：
npm install --save-dev css-loader vue-loader
配置 Webpack：
在 vue-loader 中开启 CSS Modules 支持，你可以像这样配置 Webpack：
module: {rules: [{test: /\.module\.css$/,use: ['vue-style-loader', 'css-loader?modules'],},{test: /\.css$/,exclude: /\.module\.css$/,use: ['vue-style-loader', 'css-loader'],},],
}
使用 CSS Modules：
在 Vue 单文件组件中，使用 module 属性启用 CSS Modules。
<template><button :class="$style.button">Click Me</button>
</template><script>
export default {name: 'Button',
};
</script><style module>
.button {background-color: green;color: white;padding: 10px;
}
</style>
在这里，$style.button 会被 Vue 组件自动处理为一个唯一的类名，确保样式的局部作用域,如果类名为短线相连的，可以用$style['wrap-btn']。
3. Angular 中使用 CSS Modules
Angular 原生不支持 CSS Modules，但是你可以通过 Webpack 配置来实现类似的效果。可以借助第三方库或直接配置 Webpack 来使其支持。
安装依赖：
在 Angular 项目中，需要安装 css-loader 和 style-loader 来处理 CSS Modules。
npm install --save-dev css-loader style-loader
配置 Webpack：
你需要为 Angular 项目配置 Webpack，使其支持 CSS Modules。Angular CLI 本身并不支持直接使用 CSS Modules，但你可以通过 angular.json 配置来引入自定义 Webpack 配置。
例如，你可以通过 @angular-builders/custom-webpack 来扩展 Angular CLI：
npm install @angular-builders/custom-webpack --save-dev
然后修改 angular.json 配置，添加 Webpack 自定义构建选项，启用 CSS Modules：
"architect": {"build": {"builder": "@angular-builders/custom-webpack:browser","options": {"customWebpackConfig": {"path": "./webpack.config.js"}}}
}
接着，在 webpack.config.js 中添加 CSS Modules 配置：
module.exports = {module: {rules: [{test: /\.module\.css$/,use: ['style-loader', 'css-loader?modules'],},],},
};
使用 CSS Modules：
在 Angular 组件中导入并使用 CSS Modules：
css">/* button.module.css */
.button {background-color: red;color: white;
}
// button.component.ts
import { Component } from '@angular/core';
import styles from './button.module.css';@Component({selector: 'app-button',template: `<button [ngClass]="styles.button">Click Me</button>`,styleUrls: ['./button.component.css']
})
export class ButtonComponent {styles = styles;
}
4. 其他框架（如 Svelte）中使用 CSS Modules
Svelte 也可以利用 CSS Modules 进行局部样式的隔离，Svelte 默认支持 scoped CSS，但是如果你想使用 CSS Modules 的方式，通常需要通过第三方插件来实现。
安装依赖：
npm install --save-dev svelte-preprocess
配置 Svelte：
在 svelte.config.js 中配置 svelte-preprocess，并启用 CSS Modules：
import sveltePreprocess from 'svelte-preprocess';export default {preprocess: sveltePreprocess({postcss: {plugins: [require('postcss-modules')()]}})
};
使用 CSS Modules：
css">/* Button.module.css */
.button {background-color: yellow;color: black;
}
<script>import styles from './Button.module.css';
</script><button class={styles.button}>Click Me</button>
总结
不同框架中的 CSS Modules 使用方式略有不同，但本质上都遵循以下步骤：
- 创建
.module.css样式文件。 - 配置 Webpack 或其他构建工具来支持 CSS Modules。
- 在组件中导入样式并使用自动生成的唯一类名。
React 和 Vue 的支持较为直接和简便，而 Angular 和 Svelte 需要一些额外的配置或插件支持。但无论哪个框架，CSS Modules 都能有效避免样式冲突，并提升组件化开发的效率。
