Use css modules in vue to replace scroped. vuescroped

Use css modules in vue to replace scroped. vuescroped

Previous

Css modules is a popular system for modularization and combination of CSS. Vue-loader provides integration with css modules as an alternative to scope CSS. This document introduces css modules in detail.

Introduction

The scoped technology was widely used when Vue was first used.

<style scoped> @media (min-width: 250px) {  .list-container:hover {   background: orange;  } }</style>

This optional scoped property automatically adds a unique property (such as the data-v-21e5b78) to specify the scope of the CSS within the component, during compilation. list-container: hover will be compiled into a similar one. list-container [data-v-21e5b78]: hover

However, it cannot completely avoid conflicts.

<Span data-v-0467f817 class = "errShow"> User name cannot be blank </span>

The code above is used as an example. After scoped is used, it adds a unique attribute 'data-v-0467f817 'to the element, and the CSS style is compiled as follows:

.errShow[data-v-0467f817] {  font-size: 12px;  color: red;}

However, if you define an errShow class name, it will affect the display of all components defined as errShow class names.

CSS modules is more thorough. Instead of adding attributes, it directly changes the class name.

<Span class = "_ 3ylglHI_7ASkYw5BlOlYIv_0"> the user name cannot be blank. </span>

In this way, the possibility of conflict is greatly reduced. As long as the style is not directly set for the span tag, the display of the component is basically not affected.

Modular

CSS Modules is neither an official standard nor a browser feature, but a method that limits the scope of the CSS class name selector in the build process (similar to the namespace method through hash ). The class name is dynamically generated, unique, and accurate to the style of each class in the source file

In fact, CSS Modules is only one way to modularize CSS. Why do we need CSS modularization?

CSS rules are global, and the style rules of any component are valid for the whole page. Therefore, we need to solve the style conflicts (pollution) problem. Generally, in order to solve the conflict, the class name will be written a little longer to reduce the probability of conflict, and the selector of the parent element will be added to limit the scope and so on.

CSS modularization solves this problem. Generally, it is divided into three categories.

1. Naming Conventions

This type of CSS modular scheme is mainly used to standardize CSS naming, the most common is BEM, and of course there are OOCSS and so on. Before the appearance of building tools, most of them are post on CSS naming.

2. CSS in JS

Abandon CSS and use javascript to write CSS rules. Common examples include styled-components.

3. Use JS to manage styles

Use JS to compile native CSS files and make them modular. The most common is CSS Modules.

With the rise of building tools, more and more people are using the latter two solutions. When writing CSS, there is no need to worry about style conflicts. You only need to write code in the agreed format.

Writing Method

The following describes how to write CSS modules.

Add the module attribute to the style label to enable the module mode of CSS-loader.

<style module>.red {color: red;}</style>

Use Dynamic class binding in the template: class, and add '$ style.' before the class name .'

<template> <p :class="$style.red">  This should be red </p></template>

If the class name contains a hyphen, brackets are used.

<H4: class = "$ style ['header-tit']"> category recommendation 
You can also use array or object syntax
  <p :class="{ [$style.red]: isRed }">   Am I red?  </p>  <p :class="[$style.red, $style.bold]">   Red and bold  </p>
More complex object syntax
  <ul 　　　 :class="{    [$style.panelBox]:true,    [$style.transitionByPanelBox]:needTransition   }"
More complex array syntax
  <li   :class="[    $style['aside-item'],    {[$style['aside-item_active']]:(i === index)}   ]"
Configuration
The default configuration of css modules in CSS-loader is as follows:
{ modules: true, importLoaders: 1, localIdentName: '[hash:base64]'}
You can use the css modules option of vue-loader for custom configuration of css-loader.
module: { rules: [  {   test: '\.vue$',   loader: 'vue-loader',   options: {    cssModules: {     localIdentName: '[path][name]---[local]---[hash:base64:5]',     camelCase: true    }   }  } ]}
The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.