CSS Modules在框架中的使用

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：

1. 创建一个 Button.module.css 文件：

/* Button.module.css */
.button {
  background-color: blue;
  color: white;
  padding: 10px;
}

2. 在 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：

/* 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：

/* 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 使用方式略有不同，但本质上都遵循以下步骤：

1. 创建 .module.css 样式文件。
2. 配置 Webpack 或其他构建工具来支持 CSS Modules。
3. 在组件中导入样式并使用自动生成的唯一类名。

React 和 Vue 的支持较为直接和简便，而 Angular 和 Svelte 需要一些额外的配置或插件支持。但无论哪个框架，CSS Modules 都能有效避免样式冲突，并提升组件化开发的效率。