如何让CRA支持less文件

使用npx create-react-app demo --template=typescript创建出来的CRA前端项目天然是不支持less文件的,所以想要创建出来的前端项目支持less文件就必须手动配置。本文叙述了在CRA前端项目中配置less的步骤:

1. 在项目根目录,通过运行以下命令,安装 react-scripts 的最新版本:

bash 复制代码
yarn add @craco/craco craco-less --dev

2. 在项目根目录,创建 config-overrides.js 文件。

bash 复制代码
touch config-overrides.js

3. 在 config-overrides.js 中,添加以下内容:

javascript 复制代码
const CracoLessPlugin = require('craco-less');

module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            modifyVars: { '@primary-color': '#1DA57A' }, // 可以在此处设置LESS变量
            javascriptEnabled: true,
          },
        },
      },
    },
  ],
};

4. 在 package.json 中,将 scripts 部分中的 react-scripts 替换为 cra-scripts,如下所示:

json 复制代码
"scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test",
  "eject": "craco eject"
},

5. 安装 lessless-loader,通过运行以下命令:

bash 复制代码
yarn add less less-loader --save-dev

6. 确保你的 Less 样式文件以 .less 扩展名结尾,并在你的组件中引入它们。

配置完成后,CRA 将能够解析和应用 less 样式。你可以在你的项目中使用 less 文件来定义样式,并通过导入它们到组件中使用。

相关推荐
LaoZhangAI3 分钟前
【2025最新】Claude免费API完全指南:无需信用卡,中国用户也能用
前端
hepherd22 分钟前
Flask学习笔记 - 模板渲染
前端·flask
LaoZhangAI22 分钟前
【2025最新】Manus邀请码免费获取完全指南:5种稳定渠道+3个隐藏方法
前端
经常见23 分钟前
浅拷贝与深拷贝
前端
梅子酱~28 分钟前
Vue 学习随笔系列二十二 —— 表格高度自适应
javascript·vue.js·学习
前端飞天猪28 分钟前
学习笔记:三行命令,免费申请https加密证书📃
前端
关二哥拉二胡30 分钟前
前端的 AI 应用开发系列二:手把手揭秘 RAG
前端·面试
斯~内克32 分钟前
前端图片加载性能优化全攻略:并发限制、预加载、懒加载与错误恢复策略
前端·性能优化
你的人类朋友32 分钟前
JS严格模式,启动!
javascript·后端·node.js
奇怪的知识又增长了40 分钟前
Command SwiftCompile failed with a nonzero exit code Command SwiftGeneratePch em
前端