create-react-app创建的react项目引入less文件

Alice_66

已于 2023-12-10 16:30:39 修改

阅读量436

点赞数 5

文章标签： react.js less 前端

于 2023-12-10 16:02:48 首次发布

本文链接：https://blog.csdn.net/elena_705/article/details/134909421

版权

文章讲述了在遇到`npmruneject`报错时，如何通过先执行特定git命令，然后配置less和less-loader以处理Webpack项目中的less文件。同时提及了可能需要使用Babel插件处理私有属性的情况。

摘要由CSDN通过智能技术生成

显示webpack配置文件：npm run eject
如果运行npm run eject报错，先运行 git add . 和 git commint -m ‘app init’ 这两个命令，在运行npm run eject
安装less和less-loader：npm i less less-loader
配置webpack.config.js
// 添加 less 解析规则，可以仿照项目对sass的支持

const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;

// 再在rules数组中添加下面一段代码
// Less 解析配置

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

根据报错决定是否添加npm i --save-dev @babel/plugin-proposal-private-property-in-object