Method example of using CSS modules in Create React App

Prerequisites

Please use the overall installation crete-react-app plugin, installation command: npm install create-react-app -g

First download a scaffold engineer first using the create-react-app command, installation command:

# Use Npx $ NPX CREATE-React-App My-App # NPM $ npm init npx create-react-app my-app # Using YARN $ YARN CREATE React-App My-App
   
Operation Project

$ cd my-app # Using npm $ npm start # or use YARN # Yarn Start
   in the browser Enter 
http: // localhost: 3000

Use CSS Module’s first way

Create-React-APP built-in The configuration using CSS Modules is the usage

method

using create-react-app, all .css / .lee / .scss, etc. Style files are modified to .Module.css / .Module.less / .Module.scss, etc. You can use the CSS Modules to introduce.

Usage

Write a CSS file: Button.Module.css

.Rror {background-color: red;}

 in writing a normal CSS file: another-stylesheet.css   
. Error {color: red;}

 Use CSS Modules in JS files to reference: Button.js   
Import React, {Component} from ‘React’; import style from ‘ ./Button.Module.css’; // Introduced import ‘./another-stylesheet.css’ in the way using CSS Modules; // General introduced Class Button Extends Component {render () {// Reference As a JS Object Return

View the effect in the browser
  This time the background color of the Button component It is red, but the font color is not red, because after using CSS Modules, ordinary CSS style does not work, you need to write in a global manner (: global). The style result of finally added to the element is:  Error Button  
useA second embodiment CSS Module

embodiment

npm run eject Command

This command will scaffolding hidden configurations are displayed, this process is irreversible after the run is complete, open webpack.config.js file under config directory, find the

test: cssRegex

this line was added in the process of use properties to perform the

modules: true

, as shown below:

usage

and the use of a first embodiment of the same, but no need to add a suffix behind .module css files

css prepare a document: button.css

在Create React App中使用CSS Modules的方法示例

.error {background-color: red;}

and then write a common css file: another-stylesheet.css

.error {color: red;}
   
using the CSS Modules referenced manner js file: Button. js

import React, {Component} from ‘react’; import styles from ‘./Button.css’; // manner can be used directly introduces import CSS Modules ‘./aNother-stylesheet.css’; // General introduced Class Button Extends Component {render () {// reference as a js object return
 error button ;}}  

Viewing the effect in the browser

At this time, the background color of the Button component is red, but the font color is not red, because after using CSS Modules, ordinary CSS style can not afford it. You need to write in a global manner (: global). Finally, the style results added to the element are:
   Whatever uses the second way to use CSS Modules to use CSS modules, Similar to the Sass and Less parsing configurations also added modules: true.  
Note

The default Create-React-App Scaffold cannot directly write CSS directly using Sass and LESS, you need to perform the corresponding configuration first.

The above is all the content of this article, I hope to help everyone, I hope everyone will support Tumi Cloud.

© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment