Projects created through CRA need to modify the build configuration to support less.

You can run NPM run eject to change the configuration. However, eject is irreversible and will not follow the react-Script version of the official upgrade project.

If you don’t want to override the configuration with eject, you can do so in one of the following ways:

  1. Officially supported through CRA--scripts-versionParameter to create the project using your own overridereact-scriptsThe package.The official introduction
  2. usereact-app-rewired + customize-craCombined coverage configuration
  3. usecracoCover the configuration

This paper will complete the configuration of LESS through CrACO

Configuration craco

  1. The installation@craco/craco
    npm i @craco/craco -D
Copy the code
  1. Modify thepackage.jsonIn thescriptThe label
    "scripts": {
        "start": "craco start"."build": "craco build"."test": "craco test",}Copy the code
  1. Created in the project root directorycraco.config.js
/* craco.config.js */
    module.exports = function () {... };Copy the code

The basic Configuration of Craco is complete. The craco.config.js Configuration file structure can be queried in the CrACO official document: Configuration Overview

Enable the sass

Sass-loader support has been added to CRA scaffolding. To enable Sass, simply install Node-sass.

  1. The installationnode-sass
    npm install node-sass --save 
Copy the code
  1. willsrc/App.cssrenamesrc/App.scss
  2. If you need to enableCSS Modules, change the CSS file extension to[name].module.scss 或 [name].module.sass
  • CRA scaffolding use[name].module.cssFile naming convention supportCSS ModulesAnd regular CSS.
  • CSS Modules allow automatic creation[filename]_[classname]__[hash]The unique classname of the format determines the scope of the CSS

Enable the less

CRA scaffolding does not support less by default, so extension is required

  1. Installing related Loaders
    /* Install craco-less, support some webpack loader */
    npn i craco-less -S
    
    /* Install less and less-loader */
    npm install --save-dev less-loader less
Copy the code
  1. incraco.config.jsAdded related configurations to:
    const CracoLessPlugin = require('craco-less');
    const { loaderByName } = require('@craco/craco');

    module.exports = function (webpackEnv) {
      const lessModuleRegex = /\.module\.less$/;

      return {
        plugins: [{plugin: CracoLessPlugin,
            options: {
              // less loader option
              lessLoaderOptions: {
                lessOptions: {
                /* If you need to customize themes in your project using TDesign or AntDesign component libraries, you can add the corresponding less variable */ in modifyVars
                  modifyVars: {
                      @primary-color: '#2378ff'
                  },
                  javascriptEnabled: true,}},modifyLessRule(lessRule) {
                lessRule.exclude = lessModuleRegex;
                return lessRule;
              },
              modifyLessModuleRule(lessModuleRule) {
                // configure the file suffix
                lessModuleRule.test = lessModuleRegex;

                // configure the generated local ident name
                const cssLoader = lessModuleRule.use.find(loaderByName('css-loader'));
                cssLoader.options.modules = {
                /* 
                    注意这里的命名规则：
                    - CRA脚手架创建的项目是可以直接使用css modules的，css文件的命名规则默认是[local]_[hash:base64:5]
                    - 这里使用css modules的命名规则
                */
                
                  localIdentName: '[local]_[hash:base64:5]'};returnlessModuleRule; },},},],}; };Copy the code

3. Change the CSS file extension to [name].less or [name].module.less (enable CSS Modules)