如何让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 文件来定义样式,并通过导入它们到组件中使用。

相关推荐
前端极客探险家10 分钟前
CSS 入门全解析
前端·css
隐形喷火龙35 分钟前
搭建TypeScript单元测试环境
javascript·typescript·单元测试
fs哆哆41 分钟前
在VB.net和VBA中,自定义函数GetTargetSheet()返回工作表对象
java·开发语言·前端·javascript·ecmascript
好_快1 小时前
Lodash源码阅读-uniqBy
前端·javascript·源码阅读
好_快1 小时前
Lodash源码阅读-uniqWith
前端·javascript·源码阅读
恋猫de小郭2 小时前
Flutter Widget IDE 预览新进展,开始推进落地发布
android·前端·flutter
jingling5553 小时前
【Vue3 实战】插槽封装与懒加载
前端·javascript·vue.js
Freedom风间8 小时前
前端优秀编码技巧
前端·javascript·代码规范
萌萌哒草头将军8 小时前
🚀🚀🚀 Openapi:全栈开发神器,0代码写后端!
前端·javascript·next.js
萌萌哒草头将军8 小时前
🚀🚀🚀 Prisma 爱之初体验:一款非常棒的 ORM 工具库
前端·javascript·orm