React配置Less方法和Sass方法 , webpack.config.js文件

在yarn eject 之后：

1. create-react-app 新建項目

$ create-react-app add-less && cd add-less

yarn eject 暴露配置文件

$ yarn eject
$ react-scripts eject

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

? Are you sure you want to eject? This action is permanent. (y/N)

y 確認(rèn)

修改 cofig/webpack.config.js
找到

const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;

修改為

const cssRegex = /\.(css|less)$/;
const cssModuleRegex = /\.module\.(css|less)$/;

找到

           {
              test: cssRegex,
              exclude: cssModuleRegex,
              use: getStyleLoaders({
                importLoaders: 1,
                sourceMap: isEnvProduction && shouldUseSourceMap,
              }),
              // 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,
            },

修改為

          {
              test: cssRegex,
              exclude: cssModuleRegex,
              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,
            },

如果配置sass
直接下載

yarn add node-sass

注意：下載更改之后，要重新yarn start

另外一份配置less的文章
<meta charset="utf-8">

React 版本 16.8.4
寫這篇文章是因為個人想使用螞蟻金服的AntD UI寫個demo岔帽，中間遇到一些坑截型，網(wǎng)上找到的一些方案有點過時冀膝，所以解決問題后決定自己寫點經(jīng)驗和大家分享。
AntD是用less編寫的挤忙，雖然可以直接引入CSS樣式文件，但是為了方便修改AntD主題泛啸，我才在開發(fā)環(huán)境中添加了對less文件編譯的支持边琉。

創(chuàng)建項目
當(dāng)前最新React版本是16.8.4.
使用create-react-app腳手架工具創(chuàng)建一個名為 ant-react 的項目：

image

項目創(chuàng)建完成后可以看到項目結(jié)構(gòu)很精簡属百，沒有發(fā)現(xiàn)webpack配置文件。之后我們打開package.json文件：

image

這里大家注意看一下這里標(biāo)注了react-scripts文件是2.x版本变姨，https://reactjs.org/blog/2018/10/01/create-react-app-v2.html 此鏈接講述了react-scripts文件的一些變化族扰，主要添加對sass/scss樣式文件的默認(rèn)支持…

接下來安裝less和less-loader插件包，打開終端輸入：

cd ant-react
yarn add less less-loader

或者npm install less less-loader

配置less-loader
配置less-loader需要暴露webpack配置文件定欧，這就要使用create-react-app腳手架工具提供的 eject 命令（見上圖）渔呵，運行命令前需要將項目commit一下，否則項目無法eject成功忧额，打開終端運行 yarn eject命令（或者npm run eject）厘肮，eject命令是一次性命令愧口，運行后無法恢復(fù)睦番，

yarn eject

命令運行結(jié)束之后會發(fā)現(xiàn)package.json 文件中多了很多內(nèi)容，項目結(jié)構(gòu)中多了一個config文件夾