在 Vue 3 Composition API 最近的一次 beta 升級中，無論是 Vue 3 本 3 庫 vue-next ，還是面向 Vue 2 過渡用的 @vue/composition-api 庫中，都同步更新了一個 useCSSModule 函數 -- 用來在使用了 Composition API 的 Vue 實例中，支持 CSS Modules 語法。

首先來看看什麼是 CSS Modules：

CSS Modules

CSS Modules 是一種 CSS 的模塊化和組合系統。vue-loader 集成 CSS Modules，可以作爲模擬 scoped CSS 的替代方案。

啓用 CSS Modules

如果是使用 vue cli 創建的項目，應該已經默認開啓了這一特性；如果項目中需要手動開啓，按如下設置：

// webpack.config.js
{
  module: {
    rules: [
      // ... 其它規則省略
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          {
            loader: 'css-loader',
            options: {
              // 開啓 CSS Modules
              modules: true,
              // 自定義生成的類名
              localIdentName: '[local]_[hash:base64:8]'
            }
          }
        ]
      }
    ]
  }
}

或者與其它預處理器一起使用：

// webpack.config.js -> module.rules
{
  test: /\.scss$/,
  use: [
    'vue-style-loader',
    {
      loader: 'css-loader',
      options: { modules: true }
    },
    'sass-loader'
  ]
}

然後在組件中的 <style> 上添加 module 特性： 

<style module>
.red {
  color: red;
}
.bold {
  font-weight: bold;
}
</style>

在組件中訪問 CSS Modules

在 <style> 上添加 module 後，一個叫做 $style 的計算屬性就會被自動注入組件。 

<template>
  <div>
    <p :class="$style.red">
      hello red!
    </p>
  </div>
</template>

因爲這是一個計算屬性，所以也支持 :class 的對象/數組語法：

<template>
  <div>
    <p :class="{ [$style.red]: isRed }">
      Am I red?
    </p>
    <p :class="[$style.red, $style.bold]">
      Red and bold
    </p>
  </div>
</template>

也可以通過 JavaScript 訪問：

<script>
export default {
  created () {
    console.log(this.$style.red)
  }
}
</script>

Vue 2.x 傳統用法

在 Options API 組件中：

<template>
  <span :class="$style.span1">hello 111 - {{ text }}</span>
</template>

<script>
export default {
  props: {
    text: {
      type: String,
      default: ''
    }
  }
};
</script>

<style lang="scss" module>
.span1 {
  color: red;
  font-size: 50px;
}
</style>

對於 JSX 組件，由於其沒辦法用 scoped style，所以 CSS Modules 是個很好的選擇:

<script>
export default {
  props: {
    text: {
      type: String,
      default: ''
    }
  },
  render(h) {
    return <span class={this.$style.span1}>hello 222 - {this.text}</span>;
  }
};
</script>

<style lang="scss" module>
.span1 {
  color: blue;
  font-size: 40px;
}
</style>

Vue 3.x 中的 useCSSModule

引入 useCSSModule 函數後，在 Composition API 組件中使用 CSS Modules 就有了標準方案：

<template>
  <span :class="$style.span1">hello 333 - {{ text }}</span>
</template>

<script>
import { useCSSModule } from '@vue/composition-api';

export default {
  props: {
    text: {
      type: String,
      default: ''
    }
  },
  setup(props, context) {
    const $style = useCSSModule();
    return {
      $style
    };
  }
};
</script>

<style lang="scss" module>
.span1 {
  color: green;
  font-size: 30px;
}
</style>

其源碼實現也是非常之簡單，基本就是取出 this.$style 而已：

export const useCSSModule = (name = '$style'): Record<string, string> => {
  const instance = getCurrentInstance()
  if (!instance) {
    __DEV__ && warn(`useCSSModule must be called inside setup()`)
    return EMPTY_OBJ
  }

  const mod = (instance as any)[name]
  if (!mod) {
    __DEV__ &&
      warn(`Current instance does not have CSS module named "${name}".`)
    return EMPTY_OBJ
  }

  return mod as Record<string, string>
}

自定義 CSS Modules 注入名稱

通過觀察 useCSSModule 的源碼發現，CSS Modules 的 name 好像可以不只是 $style ；確實，在 .vue 文件中可以定義不止一個 <style module> ，這可以通過設置 module 特性的值實現： 

<style module="a">
  /* 注入標識符 a */
</style>

<style module="b">
  /* 注入標識符 b */
</style>

--End--

查看更多前端好文

請搜索 fewelife 關注公衆號

轉載請註明出處

相關文章