create-react-app配置使用less文件

原创已于 2022-07-31 13:13:02 修改 · 488 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #less

于 2022-07-30 14:59:09 首次发布

react 同时被 2 个专栏收录

5 篇文章

订阅专栏

less

1 篇文章

订阅专栏

本文档详细介绍了如何在基于Create-React-App的项目中引入并配置Less，包括安装less和less-loader，通过npm run eject获取项目配置，修改webpack.config.js以支持Less，并解决配置过程中可能出现的错误，最终成功使Less样式生效。

1. 场景

使用create-react-app脚手架创建的项目引入less文件，没有显示报错信息，但是不生效

2. 解决

2.1 安装less

npm install less less-loader --save

注：如果页面显示不出来，报一大堆错，很有可能是因为他们版本的问题。
我使用的版本：
“less”: “^4.1.3”,
“less-loader”: “^5.0.0”,

2.2 拉取项目的配置文件

使用create-react-app脚手架创建的项目默认不显示config目录，执行npm run eject 拉取
出现如图所示的错误：
在这里插入图片描述
原因：修改项目文件后没有存储到本地库，按下图操作即可

git add .
git commit -m "配置less"
执行npm run eject
此时项目中新增了config 和 scripts 两个文件夹

在这里插入图片描述

2.3 修改配置文件`config/webpack.config.js`

2.3.1 搜索sassModuleRegex ，添加代码

//在这里添加less正则
const lessRegex = /\.(less)$/;
const lessModuleRegex = /\.module\.(less)$/;

在这里插入图片描述

2.3.2 搜索 getStyleLoaders，添加代码

{
    loader: require.resolve('less-loader'),
    options: lessOptions,
},

在这里插入图片描述

2.3.3 搜索 sass-loader ，添加代码

{
  test: lessRegex,
  exclude: lessModuleRegex,
  use: getStyleLoaders(
    {
      importLoaders: 2,
      sourceMap: isEnvProduction && shouldUseSourceMap,
    },
    'less-loader'
  ),
  sideEffects: true,
},
{
  test: lessModuleRegex,
  use: getStyleLoaders(
    {
      importLoaders: 2,
      sourceMap: isEnvProduction && shouldUseSourceMap,
      modules: true,
      getLocalIdent: getCSSModuleLocalIdent,
    },
    'less-loader'
  ),
},