Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

How to use CSS Module style

2025-01-16 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Internet Technology >

Share

Shulou(Shulou.com)05/31 Report--

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

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.

Views: 0

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Internet Technology

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report