在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 确认
- 修改 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，中间遇到一些坑，网上找到的一些方案有点过时，所以解决问题后决定自己写点经验和大家分享。
AntD是用less编写的，虽然可以直接引入CSS样式文件，但是为了方便修改AntD主题，我才在开发环境中添加了对less文件编译的支持。
创建项目
当前最新React版本是16.8.4.
使用create-react-app脚手架工具创建一个名为 ant-react 的项目：
image
项目创建完成后可以看到项目结构很精简，没有发现webpack配置文件。之后我们打开package.json文件：
image
这里大家注意看一下这里标注了react-scripts文件是2.x版本，https://reactjs.org/blog/2018/10/01/create-react-app-v2.html 此链接讲述了react-scripts文件的一些变化，主要添加对sass/scss样式文件的默认支持…
接下来安装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命令是一次性命令，运行后无法恢复，
yarn eject
命令运行结束之后会发现package.json 文件中多了很多内容，项目结构中多了一个config文件夹
image
打开config文件夹，找到webpack.config.js文件打开，主要修改里面的三处地方：
修改style files regexes（样式文件正则），找到 注释style files regexes，在这部分最后添加如下两行代码：
const lessRegex = /.less[图片上传失败...(image-b21964-1576223431381)]
/;
image
-
修改 getStyleLoaders 函数，添加代码（如图）
image
-
最后一处修改大约在429行，模仿代码中提供的sassRegex代码，添加如下代码，如下图
image
webpack.config.js文件修改完成。
试一下效果，将index.css文件重命名为index.less,再把index.js文件中引入的index.css文件修改为index.less文件，保存代码，命令行输入yarn start 命令（或npm start）
作者：piziyang12138
链接：https://www.jianshu.com/p/bfa308164df4
网友评论