CSS Modules

CSS Modules 是一个流行的，用于模块化和组合 CSS 的系统。vue-loader 提供了与 CSS Modules 的一流集成，可以作为模拟 scoped CSS 的替代方案。

用法

首先，CSS Modules 必须通过向 css-loader 传入 modules: true 来开启：

  1. // webpack.config.js
  2. {
  3.   module: {
  4.     rules: [
  5.       // ... 其它规则省略
  6.       {
  7.         test: /\.css$/,
  8.         use: [
  9.           'vue-style-loader',
  10.           {
  11.             loader: 'css-loader',
  12.             options: {
  13.               // 开启 CSS Modules
  14.               modules: true,
  15.               // 自定义生成的类名
  16.               localIdentName: '[local]_[hash:base64:8]'
  17.             }
  18.           }
  19.         ]
  20.       }
  21.     ]
  22.   }
  23. }

然后在你的 <style> 上添加 module 特性：

  1. <style module>
  2. .red {
  3.   color: red;
  4. }
  5. .bold {
  6.   font-weight: bold;
  7. }
  8. </style>

这个 module 特性指引 Vue Loader 作为名为 $style 的计算属性，向组件注入 CSS Modules 局部对象。然后你就可以在模板中通过一个动态类绑定来使用它了：

  1. <template>
  2.   <p :class="$style.red">
  3.     This should be red
  4.   </p>
  5. </template>

因为这是一个计算属性，所以它也支持 :class 的对象/数组语法：

  1. <template>
  2.   <div>
  3.     <p :class="{ [$style.red]: isRed }">
  4.       Am I red?
  5.     </p>
  6.     <p :class="[$style.red, $style.bold]">
  7.       Red and bold
  8.     </p>
  9.   </div>
  10. </template>

你也可以通过 JavaScript 访问到它：

  1. <script>
  2. export default {
  3.   created () {
  4.     console.log(this.$style.red)
  5.     // -> "red_1VyoJ-uZ"
  6.     // 一个基于文件名和类名生成的标识符
  7.   }
  8. }
  9. </script>

你可以查阅 CSS Modules 规范了解更多细节，诸如 global exceptions 和 composition 等。

可选用法

如果你只想在某些 Vue 组件中使用 CSS Modules，你可以使用 oneOf 规则并在 resourceQuery 字符串中检查 module 字符串：

  1. // webpack.config.js -> module.rules
  2. {
  3.   test: /\.css$/,
  4.   oneOf: [
  5.     // 这里匹配 `<style module>`
  6.     {
  7.       resourceQuery: /module/,
  8.       use: [
  9.         'vue-style-loader',
  10.         {
  11.           loader: 'css-loader',
  12.           options: {
  13.             modules: true,
  14.             localIdentName: '[local]_[hash:base64:5]'
  15.           }
  16.         }
  17.       ]
  18.     },
  19.     // 这里匹配普通的 `<style>` 或 `<style scoped>`
  20.     {
  21.       use: [
  22.         'vue-style-loader',
  23.         'css-loader'
  24.       ]
  25.     }
  26.   ]
  27. }

和预处理器配合使用

CSS Modules 可以与其它预处理器一起使用：

  1. // webpack.config.js -> module.rules
  2. {
  3.   test: /\.scss$/,
  4.   use: [
  5.     'vue-style-loader',
  6.     {
  7.       loader: 'css-loader',
  8.       options: { modules: true }
  9.     },
  10.     'sass-loader'
  11.   ]
  12. }

自定义的注入名称

在 .vue 中你可以定义不止一个 <style>，为了避免被覆盖，你可以通过设置 module 属性来为它们定义注入后计算属性的名称。

  1. <style module="a">
  2.   /* 注入标识符 a */
  3. </style>
  5. <style module="b">
  6.   /* 注入标识符 b */
  7. </style>

原文: https://vue-loader.vuejs.org/zh/guide/css-modules.html