CSS Modules在框架中的使用

CSS Modules 是一种与框架无关的技术，然而不同的前端框架（如 React、Vue、Angular）对它的使用方式会有所不同。下面分别讲解如何在这几个框架中使用 CSS Modules。

1. React 中使用 CSS Modules

React 是 CSS Modules 最常用的框架之一，它支持组件化开发，可以很方便地将样式与组件进行封装。

安装依赖：

首先，在 React 项目中使用 CSS Modules，通常需要安装 css-loader 和 style-loader（如果使用 Webpack）。

bash 复制代码

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

配置 Webpack：

在 Webpack 中配置 CSS Modules，通常需要针对 .module.css 文件进行特别处理：

js 复制代码

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 组件中导入并使用样式：

js 复制代码

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 是一个常用工具库。

javascript 复制代码

npm install classnames

javascript 复制代码

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：

bash 复制代码

npm install --save-dev css-loader vue-loader

配置 Webpack：

在 vue-loader 中开启 CSS Modules 支持，你可以像这样配置 Webpack：

js 复制代码

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。

vue 复制代码

<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。

bash 复制代码

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：

bash 复制代码

npm install @angular-builders/custom-webpack --save-dev

然后修改 angular.json 配置，添加 Webpack 自定义构建选项，启用 CSS Modules：

json 复制代码

"architect": {
  "build": {
    "builder": "@angular-builders/custom-webpack:browser",
    "options": {
      "customWebpackConfig": {
        "path": "./webpack.config.js"
      }
    }
  }
}

接着，在 webpack.config.js 中添加 CSS Modules 配置：

js 复制代码

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;
}

ts 复制代码

// 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 的方式，通常需要通过第三方插件来实现。

安装依赖：

bash 复制代码

npm install --save-dev svelte-preprocess

配置 Svelte：

在 svelte.config.js 中配置 svelte-preprocess，并启用 CSS Modules：

js 复制代码

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;
}

svelte 复制代码

<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 都能有效避免样式冲突，并提升组件化开发的效率。

CSS Modules在框架中的使用

1. React 中使用 CSS Modules

安装依赖：

配置 Webpack：

使用 CSS Modules：

使用 ﻿classnames﻿ 动态组合类名

2. Vue 中使用 CSS Modules

安装依赖：

配置 Webpack：

使用 CSS Modules：

3. Angular 中使用 CSS Modules

安装依赖：

配置 Webpack：

使用 CSS Modules：

4. 其他框架（如 Svelte）中使用 CSS Modules

安装依赖：

配置 Svelte：

使用 CSS Modules：

总结

使用 classnames 动态组合类名