react中用less的问题
加载依赖
yarn add @craco/craco less less-loader --dev
npm install craco-less
在这里你要用到@craco/craco,less,less-loader,craco-less
这里添加依赖会出现兼容问题craco-less 跟react-scripts和@craco/craco版本兼容
https://www.npmjs.com/package/craco-less
官网上有给到可兼容的版本信息
修改一下本地项目版本
npm add --exact react-scripts@5.0.1 -D
npm add --exact @craco/craco@7.1.0 -D
创建文件
然后在项目的根目录建craco.config.js
craco.config.js
const lessPlugin = require("craco-less"); module.exports = { // 插件 plugins: [ { plugin: lessPlugin, options: { lessLoaderOptions: { lessOptions: { // antdv 主题之类的配置 // modifyVars: { "@primary-color": "#1DA57A" }, javascriptEnabled: true } } } } ], }
修改文件package.json
将 react-scripts
相关的脚本替换为 craco
。修改 package.json
文件中的 scripts
部分,如下所示:
"scripts": { "start": "craco start", "build": "craco build", "test": "craco test", "eject": "react-scripts eject" },
补充
如果出现下面报错
解决办法
cnpm install axios qs --save cnpm install antd babel-plugin-import --save
在执行 npm start
到此这篇关于react中用less的问题的文章就介绍到这了,更多相关react less 内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
React Native中导航组件react-navigation跨tab路由处理详解
这篇文章主要给大家介绍了关于React Native中导航组件react-navigation跨tab路由处理的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。2017-10-10React SSR架构Stream Rendering与Suspense for Data Fetching
这篇文章主要为大家介绍了React SSR架构Stream Rendering与Suspense for Data Fetching解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-03-03
最新评论