Configure the create-react-app project using customize-cra. Add the corresponding configuration according to the needs of each project, not all of them.

1. CSS configuration

The PROJECT built by CRA has completed the CSS configuration, so we just need to use it directly. There are several ways to import. CSS files in React. Let’s look at the configuration of CSS in Webpack:

Now look at the import method:

  1. Direct importimport 'xxx.css';craScaffolding projects have a default example

A separate.css file, just import ‘./ app.css ‘directly in.tsx, and use className as a string in the HTML tag (the string is the corresponding className in.css, no dots needed).

  1. Import as a moduleimport xxx from 'xxx.module.css'; Be sure to use the suffix*.module.cssAt the end. As the importimport styles from './App.css'It doesn’t work, so we need to putApp.cssInstead ofApp.module.cssAnd then in.tsxImport, the use of the following is different

Note that since this is the use of styles. XXX, your class name is not delimited by a bar -, but can be underlined or otherwise: App-header -> AppHeader/App_Header is case-sensitive and can be referenced as className={styles[‘ app-header ‘]} if you must use a bar.

Difference between direct import and module import :(using CSS as an example, less/ SCSS /sass is the same)

  1. Direct importimport 'xxx.css', the style name must be unique, because if there are multiple CSS files and the class name is repeated between different CSS files, another class with the same name will be overwritten, for example:A.cssOne of them is called.inputIn the class,B.cssThere is also a class with the same name, soB.cssIn the.inputIt might cover itA.css, this can cause style confusion, so it is recommended to import as a module unless it is a global style.

  2. Import as a moduleimport xxx from 'xxx.module.css'; Using styles this way, you don’t have to worry about styles having the same name in different CSS files, because it compiles to generate one after the style namehashCode, thus forming a local style that does not interfere with other CSS.

    Here are the compiled differences between the two import methods:

SCSS/SASS configuration

create-react-appThe scaffolding project has been configured for youcss 和 scss/sass, so we don’t need to configure itwebpackBut if directly used.scss/.sassStyle, compile-time error becausecraIt is configured for you in the Webpack, but not in the NPM package of the projectsassThe relevantloader, so you need to manually install; You can see it in webpackscss/sassRelated configurations:

Yarn add sass sass-loader –dev: yarn add sass sass-loader –dev: yarn add sass sass-loader –dev Let’s verify this by adding the app. SCSS file to the project and then introducing it in the page component:

You can see the effect:In the same way,scc/sassIt can also be imported as a moduleimport styles from './App.module.scss', using the same method as abovecssAgain, notice*.module.scssAt the end.

You may have noticed that we are using sass-loader, but the file is.scss, and if we change it to.sass, we will get an error, I don’t know why, it is probably the Loader version; SCSS is an updated version of SASS, and the latest SASS syntax is SCSS.

3. Less configuration

Cra doesn’t have a.less configuration, so we need to make some changes to WebPack ourselves, so customize-cra, prepared in the previous article, comes in handy. Install the NPM package related to less: yarn add less less-loader –dev; AddLessLoader and addWebpackModuleRule are used to add less configuration in customize-cra.

  1. addLessLoader: in the root directoryconfig-overrides.jsFile, importaddLessLoaderAnd writeoverrideThis is the simplest configuration,addLessLoader({... })I could use some morelessConfiguration item,View the configuration item documentation

This can be used as CSS, SCSS/SASS, and can also be imported directly or modularized. Note the *.module.less suffix for modularized files.

If you are using TypeScript, the module will not be found when the module is imported. In fact, the compilation will be successful, except in VS Code, the error will be shown. If you don’t want to show the error, in the SRC filereact-app-env.d.tsAdd this code to:

  1. addWebpackModuleRule: This way, you can configure the rules you want, so we can configure them manuallylessRules are not usedaddLessLoader. fromcustomize-craThe introduction ofaddWebpackModuleRuleLess configurations are as follows:

Less is imported and used in the same way as CSS, SCSS/SASS.

The next chapter describes how to configure proxy proxy across domains.

Related NPM package versions in this section are as follows: less- v4.1.1 less- v6.0.0 sass- v1.42.1 Ass -loader – v12.1.0

PS: If there are any mistakes in the steps or descriptions, please comment. Learn together and grow together.