在create-react-app中配置less

1. 首先在终端中写npm i --save-dev less less-loader。安装less、less-loader两个包
2. 在终端中写npm run eject，暴露webpack。
3. 在项目文件夹中会出现config文件夹，其中会有webpack.config.js文件。
4. 在 webpack.config.js 中 “style files regexes” (58行) 添加 less ==》即照着Sass改一份Less的

const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;

5.在‘sass-loader’后面添加代码

{
              test: lessRegex,
              exclude: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 2,
                  sourceMap: isEnvProduction && shouldUseSourceMap,
                },
                'less-loader'
              ),
              // Don't consider CSS imports dead code even if the
              // containing package claims to have no side effects.
              // Remove this when webpack adds a warning or an error for this.
              // See https://github.com/webpack/webpack/issues/6571
              sideEffects: true,
            },
            // Adds support for CSS Modules, but using SASS
            // using the extension .module.scss or .module.sass
            {
              test: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 2,
                  sourceMap: isEnvProduction && shouldUseSourceMap,
                  modules: true,
                  getLocalIdent: getCSSModuleLocalIdent,
                },
                'less-loader'
              ),
            },

6. 此时less就配置成功了，可以测验一下是否成功
7. 在src文件夹下创建test.less

@themeColor: #17B3A3;
p{
  background: @themeColor;      //使用Less或者Sass是注意结束的 ;
  span{
    color: #fcc;
  }
}

8. 在App.js中引入使用

import React from 'react';
import './test.less'
 
function App() {
  return (
    <div className="App">
      <header className="App-header">
        <p className='Box'>
          React.
          <span>你好</span>
        </p>
      </header>
    </div>
  );
}
 
export default App;