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

相关推荐
一颗松鼠1 分钟前
JavaScript 闭包是什么?简单到看完就理解!
开发语言·前端·javascript·ecmascript
小远yyds21 分钟前
前端Web用户 token 持久化
开发语言·前端·javascript·vue.js
阿伟来咯~1 小时前
记录学习react的一些内容
javascript·学习·react.js
吕彬-前端1 小时前
使用vite+react+ts+Ant Design开发后台管理项目(五)
前端·javascript·react.js
学前端的小朱1 小时前
Redux的简介及其在React中的应用
前端·javascript·react.js·redux·store
guai_guai_guai1 小时前
uniapp
前端·javascript·vue.js·uni-app
也无晴也无风雨1 小时前
在JS中, 0 == [0] 吗
开发语言·javascript
bysking2 小时前
【前端-组件】定义行分组的表格表单实现-bysking
前端·react.js
王哲晓3 小时前
第三十章 章节练习商品列表组件封装
前端·javascript·vue.js
fg_4113 小时前
无网络安装ionic和运行
前端·npm