New in Vue 3: Use CSS Modules in Composition API

In the latest beta update to the Vue 3 Composition API, both the Vue 3 3 library vuE-Next and the @vue/ Composition-API library for Vue 2, A useCSSModule function has been synchronously updated to support CSS Modules syntax in Vue instances that use the Composition API.

First let’s look at what CSS Modules are:

CSS Modules

CSS Modules is a modular and combined system of CSS. Vue-loader integrates CSS Modules as an alternative to emulating Scoped CSS.

To enable CSS Modules

If you are creating a project using the Vue CLI, you should already have this feature enabled by default. If you need to manually enable this function in the project, press the following Settings:

// webpack.config.js
{
  module: {
    rules: [
      / /... Other rule elision
      {
        test: /\.css$/.use: [
          'vue-style-loader',
          {
            loader: 'css-loader'.options: {
              // Enable CSS Modules
              modules: true.// Customize the generated class name
              localIdentName: '[local]_[hash:base64:8]'}}]}}Copy the code

Or with other preprocessors:

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

Then add the Module feature to the component

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

Access CSS Modules in the component

After you add a module to

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

Since this is a calculated property, the object/array syntax of class is also supported:

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

It can also be accessed via JavaScript:

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

Vue 2.x Traditional usage

In the Options API component:

<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>
Copy the code

For JSX components, CSS Modules are a good choice because they can’t be scoped Style:

<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>
Copy the code

UseCSSModule in Vue 3.x

With the introduction of the useCSSModule function, we have a standard solution for using CSS Modules in Composition API components:

<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>
Copy the code

$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>}Copy the code

Custom CSS Modules injection name

By looking at the useCSSModule source code, it seems that the name of CSS Modules can be more than $style; Indeed, it is possible to define more than one

<style module="a"</style> <style module="b"< span style>Copy the code

–End–

View more front-end good article please search fewelife concern public number reprint please indicate the source