react项目配置less 无需eject

最新推荐文章于 2023-07-21 16:26:29 发布

原创最新推荐文章于 2023-07-21 16:26:29 发布 · 313 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #less #前端

react 同时被 2 个专栏收录

14 篇文章

订阅专栏

less

5 篇文章

订阅专栏

文章介绍了如何在项目中使用craco和craco-less插件来处理less文件。首先，通过yarn添加craco-less依赖。接着，修改craco.config.js，引入并配置CracoLessPlugin，设置lessLoaderOptions以改变全局less变量，例如将`@primary-color`设置为`#1DA57A`，同时确保javascriptEnabled选项为true。

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

项目配置 @craco/craco ，可参考博客

安装依赖 craco-less

yarn add craco-less

修改craco.config.js

// 引入处理less的plugin
const CracoLessPlugin = require('craco-less');
module.exports = {
  // 添加对less的处理配置
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            // 添加全局less变量
            modifyVars: { '@primary-color': '#1DA57A' },
            javascriptEnabled: true,
          },
        },
      },
    },
  ],
};