问题的由来
crate-react-app是我们非常常用的初始化项目点的工具,在默认情况下,刚创建的好的项目是没有暴露出配置的,如果需要暴露则需要运行对应的命令:
yarn/npm run eject
但是既然官方不推荐我们来暴露这些配置,那么有没有办法不暴露配置就能实现我们的一些常用配置呢?
答案是肯定的:
有多种方式可以实现,我这里具体讲讲我探究出来的方案:
基于customize-cra 来配置less .
开始配置
首先按照基本的套路来,先安装对应的库
yarn add customize-cra react-app-rewired --save-dev
// 或者
npm install customize-cra react-app-rewired --save-dev
接着我们在根目录下创建一个文件名为 config-overrrides的文件,输入如下代码:
const {
override,
} = require('customize-cra');
module.exports = override(
// 这里我们将实现对默认设置的覆盖条件
)
紧接着,我们来修改package.json里的scrip 命令:
// 修改前
"start": "react-scripts start",
"build": "react-scripts build",
"eject": "react-scripts eject"
// 修改后
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"eject": "react-scripts eject"
这里我们暂且保留 eject ,也许你不想配置了的时候还能继续使用,或者碰到其他解决不了的问题了想来暴露配置,这里预览。
配置less
less 是我们常用的css 预处理工具,能够提供给我们样式嵌套等丰富的功能,所以我们这里使用less.
还是老套路,先安装对应的库:
yarn add less less-loader --save-dev
或者
npm install less less-loader --save-dev
接着在config-overrides文件中增加less文件配置:
const {
override,
addLessLoader,
} = require('customize-cra')