99超碰在线免费公开,亚洲一区在线

在yarn eject 之后：

1. create-react-app 新建項(xiàng)目

$ 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
寫(xiě)這篇文章是因?yàn)閭€(gè)人想使用螞蟻金服的AntD UI寫(xiě)個(gè)demo，中間遇到一些坑，網(wǎng)上找到的一些方案有點(diǎn)過(guò)時(shí)，所以解決問(wèn)題后決定自己寫(xiě)點(diǎn)經(jīng)驗(yàn)和大家分享。
AntD是用less編寫(xiě)的，雖然可以直接引入CSS樣式文件，但是為了方便修改AntD主題，我才在開(kāi)發(fā)環(huán)境中添加了對(duì)less文件編譯的支持。

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

image

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

image

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

接下來(lái)安裝less和less-loader插件包，打開(kāi)終端輸入：

cd ant-react
yarn add less less-loader

或者npm install less less-loader

配置less-loader
配置less-loader需要暴露webpack配置文件，這就要使用create-react-app腳手架工具提供的 eject 命令（見(jiàn)上圖），運(yùn)行命令前需要將項(xiàng)目commit一下，否則項(xiàng)目無(wú)法eject成功，打開(kāi)終端運(yùn)行 yarn eject命令（或者npm run eject），eject命令是一次性命令，運(yùn)行后無(wú)法恢復(fù)，

yarn eject

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