STEP 1:

$ yarn eject

執(zhí)行的時(shí)候沛简，有提示:NOTE: Create React App 2+ supports TypeScript, Sass, CSS Modules and more without ejecting: https://reactjs.org/blog/2018/10/01/create-react-app-v2.html
因?yàn)椋瑘?zhí)行該命令后會(huì)把已構(gòu)建依賴項(xiàng)斥废、配置文件和腳本復(fù)制到程序目錄中椒楣。該操作是不可逆轉(zhuǎn)的，執(zhí)行完成后會(huì)刪除這個(gè)命令牡肉，也就是說只能執(zhí)行一次捧灰。

插曲：執(zhí)行的時(shí)候，被git給阻擋了统锤，因?yàn)槭窃趯W(xué)習(xí)毛俏，所以我直接用

$ find . -name ".git" | xargs rm -Rf

用這個(gè)命令把git給清除了。如果是項(xiàng)目饲窿，自己按照提示煌寇，把git相關(guān)的commit，stash什么的逾雄，處理完畢就好阀溶。
執(zhí)行完畢后腻脏，package.json文件被更改了，與此同時(shí)淌哟，會(huì)生成新文件夾config：

config文件夾

STEP 2:

修改webpack.config.js配置文件迹卢。我們找到sassRegex，模仿它來配置lessRegex徒仓。
(1).配置less

// style files regexes
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
const lessRegex = /\.less$/; //這一句和下一句是新增的less的配置
const lessModuleRegex = /\.module\.less$/;

(2).配置less-loader
找到"test: sassRegex"這個(gè)腐碱，搜一下即可，然后模仿這個(gè)來寫less的掉弛。

// Adds support for CSS Modules, but using LESS
            {
              test: lessRegex,
              exclude: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 3,
                  modules: true,
                  sourceMap: isEnvProduction && shouldUseSourceMap,
                },
                'less-loader'
              ),
              sideEffects: true,
            },
            {
              test: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 3,
                  sourceMap: isEnvProduction && shouldUseSourceMap,
                  modules: {
                    getLocalIdent: getCSSModuleLocalIdent,
                  },
                },
                'less-loader'
              ),
            },

這里症见，我先直接copy了sass的配置，然后改成less殃饿，運(yùn)行后不好用谋作。之后，又在lessRegex里加了一句modules: true,才可以運(yùn)行乎芳。致于 importLoaders: 3遵蚜，這后面的數(shù)字，是3奈惑，是1吭净，都好用，沒有查具體意義肴甸。
3.修改代碼

import styles from './styles.less'
......(省略中間代碼)
<div className={styles.background2}>
......(省略之后的代碼)

這里寂殉，引入less文件，作為styles原在，設(shè)置className的時(shí)候友扰，將原本的雙引號(hào)，改成花括號(hào)庶柿。至此村怪，less的引用成功。
配置的時(shí)候請(qǐng)注意：關(guān)于 less 配置規(guī)則放在 sass 的解析規(guī)則下面即可浮庐，如果放在了 file-loader 的解析規(guī)則下面实愚，less 文件解析不會(huì)生效。(這段注意來自于網(wǎng)絡(luò)兔辅，沒有驗(yàn)證過）

關(guān)于引用less文件，還有一種更優(yōu)雅的配置方案击喂，不需要用eject暴露webpack文件维苔。
下一篇：React中使用less(use CSS Modules)的兩種配置方法

參考鏈接1：樣式設(shè)置和CSS文件引入
參考鏈接2: CSS預(yù)處理器LESS、SASS使用教程
參考鏈接3: 學(xué)習(xí)Less-看這篇就夠了
參考鏈接4： create-react-app使用less最詳細(xì)說明