The example usage of Modules in CSS

This article mainly explains "the example usage of Modules in CSS". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Now let the editor take you to learn "the example usage of Modules in CSS".

1. Define the css file.

.className {color: green;} / * write global style * /: global (.className) {color: red;} / * style reuse * / .otherClassName {composes: className; color: yellow;} .otherClassName {composes: className from ". / style.css";}

2. Import the css file in the js module.

Import styles from ". / style.css"; Element [XSS _ clean] =''

3. Configure css-loader packaging. CSS Modules cannot be used directly, but needs to be packaged.

Generally, the configuration of css modules can be completed by configuring the modules property in css-loader.

/ / webpack.config.jsmodule.exports = {module: {rules: [{test: /\ .css $/, use: {loader: 'css-loader', options: {modules: {/ / Custom hash name localIdentName:' [path] [name] _ [local]-- [hash:base64:5]' }]}}

4. The final packaged css class name is generated by a long list of hash values.

. _ 2DHwuiHWMnKTOYG45T0x34 {color: red;}. _ 10B-buq6_BEOTOl9urIjf8 {background-color: blue;} at this point, I believe you have a better understanding of "the example usage of Modules in CSS". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!