Vue.js 中使用 CSS Modules 的详细教程-JavaScript中文网-JavaScript教程资源分享门户

CSS Modules 是一种用于解决 CSS 命名冲突的方案，它能够让我们在 Vue.js 中更轻松地管理样式，避免样式冲突的问题。本文将详细介绍如何在 Vue.js 中使用 CSS Modules，包括配置、使用方法和注意事项。

配置

首先，我们需要安装 css-loader 和 style-loader，它们是用于处理样式的 webpack loader。我们可以使用 npm 或者 yarn 进行安装：

npm install --save-dev css-loader style-loader
# 或者
yarn add --dev css-loader style-loader

安装完成后，我们需要在 webpack 配置文件中添加对 CSS Modules 的支持。具体来说，我们需要在 module.rules 中添加如下配置：

// www.javascriptcn.com code example
{
  test: /\.css$/,
  use: [
    'style-loader',
    {
      loader: 'css-loader',
      options: {
        modules: true
      }
    }
  ],
  include: /src/
}

其中，modules 选项用于开启 CSS Modules。我们还需要注意一点，即 include 选项的值必须为我们项目中实际存放样式文件的目录，这样才能正确地应用 CSS Modules。

使用方法

在配置完成后，我们就可以在 Vue.js 中使用 CSS Modules 了。具体来说，我们需要在样式文件中使用 :local 选择器来定义局部样式，如下所示：

// www.javascriptcn.com code example
/* App.vue */
<style module>
.header {
  background-color: #eee;
  padding: 10px;
}

.title {
  font-size: 24px;
}
</style>

在上面的例子中，我们使用了 module 属性来开启 CSS Modules，然后使用 :local 选择器来定义 header 和 title 两个局部样式。

接下来，我们需要在模板中使用 class 绑定来应用这些样式：

<!-- App.vue -->
<template>
  <div :class="$style.header">
    <h1 :class="$style.title">{{ message }}</h1>
  </div>
</template>

在上面的例子中，我们使用了 $style 对象来引用局部样式。这个对象是在编译时自动生成的，它包含了所有局部样式的类名和对应的样式。

注意事项

使用 CSS Modules 时需要注意以下几点：

局部样式只能在当前组件中生效，无法在子组件中继承。如果需要在多个组件中共用样式，可以将它们提取到公共样式文件中。
在使用 :local 选择器时，注意它只能作用于当前选择器内部的样式，无法影响子元素或后代元素的样式。
如果在样式文件中使用了 @import 或者 url() 等语法，需要使用 ~ 来表示项目根目录，例如 @import '~/styles/variables.css'。

示例代码

最后，我们来看一个完整的示例代码，它演示了如何在 Vue.js 中使用 CSS Modules：

// www.javascriptcn.com code example
<!-- App.vue -->
<template>
  <div :class="$style.header">
    <h1 :class="$style.title">{{ message }}</h1>
  </div>
</template>

<style module>
.header {
  background-color: #eee;
  padding: 10px;
}

.title {
  font-size: 24px;
}
</style>

<script>
export default {
  name: 'App',
  data() {
    return {
      message: 'Hello, Vue.js!'
    }
  }
}
</script>

// www.javascriptcn.com code example
// webpack.config.js
module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: true
            }
          }
        ],
        include: /src/
      }
    ]
  }
}

// www.javascriptcn.com code example
/* variables.css */
:local {
  --primary-color: #42b983;
}

/* Button.vue */
<template>
  <button :class="$style.button">{{ text }}</button>
</template>

<style module>
.button {
  background-color: var(--primary-color);
  color: #fff;
  border: none;
  padding: 10px;
  border-radius: 5px;
}
</style>

以上就是在 Vue.js 中使用 CSS Modules 的详细教程，希望对你有所帮助。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d2cdb5a941bf71345772d8

Vue.js 中使用 CSS Modules 的详细教程

配置

使用方法

注意事项

示例代码

接着读