CSS Modules

需要 ^9.8.0

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

使用

在你的 <style> 上添加 module 属性：

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

这将为 css-loader 打开 CSS Modules 模式，生成的 CSS 对象将为组件注入一个名叫 $style 的计算属性，你可以在你的模块中使用动态 class 绑定：

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

由于它是一个计算属性，它也适用于 :class 的 object/array 语法：

  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.     // -> "_1VyoJ-uZOjlOxP7jWUy19_0"
  6.     // an identifier generated based on filename and className.
  7.   }
  8. }
  9. </script>

请参考 CSS Modules 规范了解更多诸如 global exception 和 composition 等详细信息。

自定义注入名称

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

  1. <style module="a">
  2.   /* identifiers injected as a */
  3. </style>
  5. <style module="b">
  6.   /* identifiers injected as b */
  7. </style>

配置 css-loader Query

CSS Modules 处理是通过 css-loader。默认 query 如下：

  1. {
  2.   modules: true,
  3.   importLoaders: 1,
  4.   localIdentName: '[hash:base64]'
  5. }

你可以使用 vue-loader 的 cssModules 选项去为 css-loader 添加 query 配置：

  1. module: {
  2.   rules: [
  3.     {
  4.       test: '\.vue$',
  5.       loader: 'vue-loader',
  6.       options: {
  7.         cssModules: {
  8.           localIdentName: '[path][name]---[local]---[hash:base64:5]',
  9.           camelCase: true
  10.         }
  11.       }
  12.     }
  13.   ]
  14. }

原文: https://vue-loader-v14.vuejs.org/zh-cn/features/css-modules.html