How to use CSS Modules in Vue

This article mainly introduces the elegant method of using CSS Modules in Vue. The text of this article is combined with the example code to introduce it to you in great detail. Friends in need can refer to

CSS Modules: Local Scope& Modularity

CSS Modules gives each local class a globally unique class name so that component styles will not affect each other. For example:

/* button.css */
.button {
 font-size: 16px;
}
.mini {
 font-size: 12px;
}

It will be converted to something like this:

/* button.css */
.button__button--d8fj3 {
 font-size: 16px;
}
.button__mini--f90jc {
 font-size: 12px;
}

When importing a CSS module file, it will provide us with the mapping object of local class name to global class name. Like this:

import styles from './button.css'
// styles = {
// button: 'button__button--d8fj3',
// mini: 'button__mini--f90jc'
// }
element.innerHTML = '<button class="&#39; + styles.button + &#39; &#39; + styles.mini + &#39;" />'

vue-css-modules: Simplified class name mapping

The following is a button component using CSS Modules:

<template>
 <button :class="{
 &#39;global-button-class-name&#39;: true,
 [styles.button]: true,
 [styles.mini]: mini
 }">点我</button>
</template>
<script>
 import styles from './button.css'
 export default {
 props: { mini: Boolean },
 data: () => ({ styles })
 }
</script>

Indeed, CSS Modules is a good choice for Vue components. But there are also the following shortcomings:

• You must pass in styles in data

• You must use styles.localClassName to import the global class name

• If there are other global class names, you must put them together

• If you want to bind to the property value of the component, even if it is local The class name is the same as the attribute name, and must also be specified explicitly

For the button component above, after using vue-css-modules:

<template>
 <button
 class="global-button-class-name"
 styleName="button :mini">
 点我
 </button>
</template>
<script>
 import CSSModules from 'vue-css-modules'
 import styles from './button.css'
 export default {
 mixins: [CSSModules(styles)],
 props: { mini: Boolean }
 }
</script>

Now:

• You don’t have to pass styles in data, but you have to pass styles in mixins:full_moon_with_face:

• You can say goodbye to styles.localClassName

• Put the local class name in the styleName attribute, and the global class name in the class attribute, which regulates many things

• The local class name binds the component with the same name Attribute, just add in front of it: modifier

modifier

@button

<button styleName="@button">按钮</button>

This is equivalent to:

<button styleName="button" data-component-button="true">按钮</button>

This allows you to externally reset the style of a component:

.form [data-component-button] {
 font-size: 20px;
}

$type

<button styleName="$type">按钮</button>

This is equivalent to:

<button :styleName="type">按钮</button>

:mini

<button styleName=":mini">按钮</button>

This is equivalent to:

<button :styleName="mini ? &#39;mini&#39; : &#39;&#39;">按钮</button>
disabled=isDisabled
<button styleName="disabled=isDisabled">按钮</button>

This is equivalent to:

<button :styleName="isDisabled ? &#39;disabled&#39; : &#39;&#39;">按钮</button>

How to use

Use in Vue template

Introduce CSS module outside the template

<template>
 <button
 class="global-button-class-name"
 styleName="button :mini">
 点我
 </button>
</template>
<script>
 import CSSModules from 'vue-css-modules'
 import styles from './button.css'
 export default {
 mixins: [CSSModules(styles)],
 props: { mini: Boolean }
 }
</script>

Use CSS module inside the template

<template>
 <button
 class="global-button-class-name"
 styleName="button :mini">
 点我
 </button>
</template>
<script>
 import CSSModules from 'vue-css-modules'
 export default {
 mixins: [CSSModules()],
 props: { mini: Boolean }
 }
</script>
<style module>
 .button {
 font-size: 16px;
 }
 .mini {
 font-size: 12px;
 }
</style>

Use in Vue JSX

import CSSModules from 'vue-css-modules'
import styles from './button.css'
export default {
 mixins: [CSSModules(styles)],
 props: { mini: Boolean },
 render() {
 return (
  <button styleName="@button :mini">点我</button>
 )
 }
}

Using in Vue rendering function

import CSSModules from 'vue-css-modules'
import styles from './button.css'
export default {
 mixins: [CSSModules(styles)],
 props: { mini: Boolean },
 render(h) {
 return h('button', {
  styleName: '@button :mini'
 }, '点我')
 }
}

The above is the entire content of this article. I hope it will be helpful to everyone's learning. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

Vue.js recursive component to implement tree menu

How to solve the problem that stylus cannot be used in vue-cli

The above is the detailed content of How to use CSS Modules in Vue. For more information, please follow other related articles on the PHP Chinese website!