Sample code using CSS Modules in Create-React-App

If we use WebPack + ES6 from zero to combine the front-end application, it is bound to consume a lot of effort in a variety of WebPack configurations, so there is Scaffolding, Create-React-App is one of them.
For CSS Modules, in React, it is usually used to avoid except that the pattern rules are covered with each other and implement other functions.

Configure the pop-up configuration file

If you use the Create-React-APP to build a project, all configuration files are hidden, the entire directory is first like this

在create-react-app中使用css modules的示例代码 So, the first step is to pop up all of the profiles, run the following code in the root directory

  The file directory after the pop-up is first  


Script and config folder

在create-react-app中使用css modules的示例代码
Configure related files

Open Config folder


We need to configure webpack.config.dev.js, if you need to configure WebPack.config.Prod.js if you need to package the project, but two file configuration methods are the same, with WebPack.config.dev .js as an example.

在create-react-app中使用css modules的示例代码



If no CSS modules is configured, there is no Options. Modules optionSet it to 在create-react-app中使用css modules的示例代码

Use

We use the List component of a TODO project as an example to briefly introduce the use of CSS modules in React. This List component is a UL will be listed. The effect is as follows

Eating, fragment is the display of the List component

Let’s write, how to write CSS, very short code is as follows 在create-react-app中使用css modules的示例代码


.Thelist {list-style: none; padding-left: 0; width: 255px; } .Thelist Li {Color: # 333; Background: RGBA (255, 255, 255, 0.5); Padding: 15px; margin-bottom: 15px; border-radius: 5px; cursor: Pointer;}

The name is called TodoItem.css
   


Import React from ‘React’; import style from ‘ ./TodoItem.css’; Class TodoItem Extends React.comPonent {Constructor (Props) {Super (Props); this.handlechange = this.handlechange.bind (this);} Handlechange (e) {this.props.ondelete(E.TARGET.GETATRIBUTE (‘name’));} render () {let TodoEntries = this.props.entries; return (

{TODOENTRIES.MAP ((item) => {RETURN (

{item.text}
)}} )}} EXPORT DEFAULT TODOITEM;
  In this way, we view  
    in the console


在create-react-app中使用css modules的示例代码 Related ClassName is compiled into a hash string, and is different from different The introduction of a hash string in the file is not the same

The above is all the content of this article, I hope that everyone will help everyone, I hope everyone supports Tumi Cloud. 在create-react-app中使用css modules的示例代码

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

Please log in to comment