How to use CSS Module style
Most people do not understand the knowledge points of this article "how to use CSS Module style", so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "how to use CSS Module style" article.
CSS Modules usage
Sample base
First, clone the sample library.
$git clone https://github.com/ruanyf/css-modules-demos.git
Then, install.
$cd css-modules-demos
$npm install
Then you can run the first example.
$npm run demo01
Open a browser, visit http://trustauth.cn:8080, and view the results. Other examples work in a similar way.
I. Local scope
The rules of CSS are global, and the style rules of any component are valid for the entire page.
The only way to generate a local scope is to use a unique class name that is not duplicated with other selectors. This is what CSS Modules does.
The following is a React component App.js.
Import React from 'react'
Import style from'. / App.css'
Export default () = > {
Return (
Hello World
);
}
In the above code, we import the style file App.css into the style object, and then reference style.title to represent a class.
.title {
Color: red
}
The build tool compiles the class name style.title into a hash string.
Hello World
App.css is also compiled at the same time.
. _ 3zyde4l1yATCOkgn-DBWEL {
Color: red
}
This makes the class name unique and valid only for App components.
CSS Modules provides a variety of plug-ins to support different build tools. This article uses Webpack's css-loader plug-in because it has the best support for CSS Modules and is easy to use. By the way, if you want to learn Webpack, you can read my tutorial Webpack-Demos.
Here is the webpack.config.js for this example.
Module.exports = {
Entry: _ _ dirname +'/ index.js'
Output: {
PublicPath:'/
Filename:'. / bundle.js'
}
Module: {
Loaders: [
{
Test: / / .jsx? $/
Exclude: / node_modules/
Loader: 'babel'
Query: {
Presets: ['es2015',' stage-0', 'react']
}
}
{
Test: /\ .css $/
Loader: "styleMurloaderloaderloaderloading modules"
}
]
}
}
In the above code, the key line is styleMusure loaderloaderloading modules, which adds a query parameter modules after css-loader to turn on the CSS Modules function.
Now, run the Demo.
$npm run demo01
When you open http://trustauth.cn:8080, you can see the results, and the H1 title appears in red.
II. Global scope
CSS Modules allows you to declare a global rule using the syntax of: global (.className). Any class declared in this way will not be compiled into a hash string.
App.css joins a global class.
.title {
Color: red
}
: global (.title) {
Color: green
}
When App.js is written in the normal way of class, it refers to the global class.
Import React from 'react'
Import styles from'. / App.css'
Export default () = > {
Return (
Hello World
);
}
Run this example.
$npm run demo02
Open http://trustauth.cn:8080 and you should see the H1 title in green.
CSS Modules also provides an explicit local scope syntax: local (.className), which is equivalent to .className, so the above App.css can also be written as follows.
: local (.title) {
Color: red
}
: global (.title) {
Color: green
}
Customized hash class name
The default hash algorithm for css-loader is [hash:base64], which compiles .title to a string like. _ 3zyde4l1yATCOkgn-DBWEL.
The format of the hash string can be customized in webpack.config.js.
Module: {
Loaders: [
/ / …
{
Test: /\ .css $/
Loader: "styleMutual loader _ local] _ hash:base64:5 _ name = [path] [name]-[local]-[hash:base64:5]"
}
]
}
Run this example.
$npm run demo03
Title is compiled into demo03-components-App-title-GpMto.
IV. The combination of Class
In CSS Modules, one selector can inherit the rules of another selector, which is called "composition".
In App.css, let .title inherit .className.
.className {
Background-color: blue
}
.title {
Composes: className
Color: red
}
App.js does not need to be modified.
Import React from 'react'
Import style from'. / App.css'
Export default () = > {
Return (
Hello World
);
}
Run this example.
$npm run demo04
Open http://trustauth.cn:8080 and you will see the red H1 on the blue background.
The App.css is compiled into the following code.
. _ 2DHwuiHWMnKTOYG45T0x34 {
Color: red
}
. _ 10B-buq6_BEOTOl9urIjf8 {
Background-color: blue
}
Accordingly, the class of H1 will also be compiled into
