react中使用less

原创已于 2023-08-22 09:49:33 修改 · 382 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #less #前端

于 2023-06-30 16:12:22 首次发布

文章指导如何在React项目中手动配置Less及Less-loader。首先通过npm安装less和less-loader，然后执行eject命令以暴露配置文件。接着，需要在config文件夹下的webpack.config.js文件中添加针对Less的规则，包括对普通Less文件和模块化Less文件的不同处理，以支持sourceMap和模块化功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

由于react和vue不一样，需要我们自己暴露配置文件

1.首先安装less

npm install less-loader less --save-dev

2.执行eject命令暴露配置文件

如果在使用git时要先提交代码才可以暴露配置文件

npm run eject

输入y完成安装后会出现config文件夹

3.修改config文件夹下的webpack.config.js文件

// 增加less的配置
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;

// 新增less配置
{
   loader: require.resolve('less-loader'),
   options: lessOptions,
},

// 新增less配置
{
   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'
   ),
},