CSS Modules

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

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

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

    因为这是一个计算属性，所以它也支持 :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.     </p>
    8.   </div>
    9. </template>

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

    如果你只想在某些 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.     // 这里匹配普通的 `<style>` 或 `<style scoped>`
    19.     {
    20.       use: [
    21.         'vue-style-loader',
    22.         'css-loader'
    23.       ]
    24.     }
    25.   ]
    26. }

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

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