如何让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 小时前
URL时间戳参数深度解析:缓存破坏与前端优化的前世今生
前端·缓存
半点寒12W2 小时前
微信小程序实现路由拦截的方法
前端
某公司摸鱼前端3 小时前
uniapp socket 封装 (可拿去直接用)
前端·javascript·websocket·uni-app
要加油哦~3 小时前
vue | 插件 | 移动文件的插件 —— move-file-cli 插件 的安装与使用
前端·javascript·vue.js
小林学习编程3 小时前
Springboot + vue + uni-app小程序web端全套家具商场
前端·vue.js·spring boot
柳鲲鹏3 小时前
WINDOWS最快布署WEB服务器:apache2
服务器·前端·windows
weixin-a153003083164 小时前
【playwright篇】教程(十七)[html元素知识]
java·前端·html
ai小鬼头5 小时前
AIStarter最新版怎么卸载AI项目?一键删除操作指南(附路径设置技巧)
前端·后端·github
wen's5 小时前
React Native 0.79.4 中 [RCTView setColor:] 崩溃问题完整解决方案
javascript·react native·react.js
一只叫煤球的猫5 小时前
普通程序员,从开发到管理岗,为什么我越升职越痛苦?
前端·后端·全栈