Vue 中使用 CSS Modules优雅方法

Vue 中使用 CSS Modules优雅方法攻略

什么是 CSS Modules?

CSS Modules 是一种用于解决全局样式冲突问题的 CSS 模块化方案。通过将样式作用域限制在组件范围内，可以避免不同组件之间的样式互相干扰。

步骤

步骤 1: 配置项目

首先，确保你的项目中已经集成了 Vue，并且项目的构建工具支持使用 CSS Modules。下面以 webpack 配置为例，假设你已经在项目中使用了 vue-cli。

1. 打开 webpack.config.js 文件。
2. 在 module.rules 数组中添加以下规则：

{
  test: /\.css$/,
  use: [
    {
      loader: 'vue-style-loader'
    },
    {
      loader: 'css-loader',
      options: {
        modules: true, // 启用 CSS Modules
        localIdentName: '[name]__[local]--[hash:base64:5]' // 自定义类名格式
      }
    }
  ]
}

步骤 2: 在组件中使用 CSS Modules

现在你可以在 Vue 组件中使用 CSS Modules 了。

1. 在组件的 <style> 标签中，将 scoped 属性移除，因为 scoped 属性会与 CSS Modules 冲突。
2. 在组件中引入样式文件，并将其绑定到组件的 style 属性上，例如：

<template>
  <div class="my-component">
    ...
  </div>
</template>

<script>
import styles from './MyComponent.module.css';

export default {
  ...
  style: styles,
  ...
}
</script>

<style module>
/* 使用 CSS Modules 自定义样式 */
.my-component {
  color: red;
}
</style>

在上述示例中，MyComponent.module.css 是一个 CSS Modules 样式文件。在 <style module> 代码块中，你可以像往常一样定义样式，但是类名自动生成，不会互相冲突。

示例说明：

示例一：使用 CSS Modules 进行样式隔离

假设有两个组件：Button 和 Form，在不使用 CSS Modules 的情况下，很容易出现样式冲突。

在使用 CSS Modules 的情况下，我们可以为每个组件创建一个独立的样式文件，并将其引入到组件中。这样，每个组件的样式都是独立的，不会互相干扰。

例如：

// Button.vue
<template>
  <button class="button">Click me</button>
</template>

<script>
import styles from './Button.module.css';

export default {
  style: styles,
}
</script>

<style module>
.button {
  background-color: blue;
  color: white;
}
</style>

// Form.vue
<template>
  <form class="form">
    <input type="text" class="input" />
    <button class="button">Submit</button>
  </form>
</template>

<script>
import styles from './Form.module.css';

export default {
  style: styles,
}
</script>

<style module>
.form {
  padding: 10px;
}

.input {
  border: 1px solid gray;
}

.button {
  background-color: green;
  color: white;
}
</style>

在上述示例中，Button 和 Form 组件都有一个名为 button 的类名，但是因为使用了 CSS Modules，它们的样式是独立的，不会相互影响。

示例二：使用 CSS Modules 自定义类名格式

CSS Modules 允许你自定义生成的类名格式，这对于编写更加可读性高的样式代码很有帮助。

在配置步骤中我们提到了 localIdentName 选项，你可以在该选项中使用占位符来自定义类名生成规则。

例如，在 localIdentName 中使用 [name]__[local]--[hash:base64:5]，它会根据文件名、类名和 hash 值来生成类名，长度为 5。

// MyComponent.module.css
.myComponent {
  color: red;
}

// MyOtherComponent.module.css
.myOtherComponent {
  color: blue;
}

生成的类名如下所示：

<div class="MyComponent__myComponent--abcde"></div>
<div class="MyOtherComponent__myOtherComponent--fghij"></div>

总结

使用 CSS Modules 可以轻松解决 Vue 组件中的样式冲突问题。通过正确配置项目和在组件中使用 CSS Modules，你可以实现样式的模块化，增加代码的可维护性。