内容简介:在配置less之前,我使用解构后,我得到的webpack版本为
一、配置less
在配置less之前,我使用 create-react-app
,得到 React
版本为 ^16.8.6
。
- 安装依赖并解构目录:(可以在命令前加
sudo
确保不会出现权限问题)
yarn add babel-plugin-import 或 npm install babel-plugin-import
yarn less-loader 或 npm install less-loader
yarn eject 或 npm run eject
解构后,我得到的webpack版本为 4.28.3
, config
文件夹长这样:
于是,打开 webpack.config.js
修改配置:
在第42行附近修改代码为:
// style files regexes const cssRegex = /\.css$/; const cssModuleRegex = /\.module\.css$/; const sassRegex = /\.(scss|sass)$/; const sassModuleRegex = /\.module\.(scss|sass)$/; const lessRegex = /\.less$/; //新增 const lessModuleRegex = /\.module\.less$/; //新增
在第327行附近修改代码为:
oneOf: [ { ...//其他配置 }, ...//其他配置 //配置less-loader(新增) { test: lessRegex, exclude: lessModuleRegex, use: getStyleLoaders({ importLoaders: 2 }, 'less-loader'), }, { test: lessModuleRegex, use: getStyleLoaders( { importLoaders: 2, modules: true, getLocalIdent: getCSSModuleLocalIdent, }, 'less-loader' ), }, //EndOf配置less-loader(新增) ...//其他配置 ]
二、配置antd定制主题
修改 package.json
:
"babel": { "presets": [ "react-app" ], "plugins": [ [ "@babel/plugin-proposal-decorators", { "legacy": true } ], [ "@babel/plugin-proposal-class-properties", { "loose": true } ], [ "import", { "libraryName": "antd", "libraryDirectory": "es", "style": true //这里是 true 不是 'css' } ] ] }
在 webpack.config.js
第110行附近修改代码为:
if (preProcessor) { let loader = { loader: require.resolve(preProcessor), options: { sourceMap: isEnvProduction && shouldUseSourceMap, } } if (preProcessor === "less-loader") { //新增 loader.options.modifyVars = { 'primary-color': '#1DA57A', 'link-color': '#1DA57A', 'border-radius-base': '2px' } loader.options.javascriptEnabled = true } //EndOf新增 loaders.push(loader); }
最后,看到按钮变色就是成功啦!更多样式修改可以看 文档 ~
完~若有不足,请多指教,万般感谢!
以上所述就是小编给大家介绍的《React配置less与antd定制主题》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- Kustomize: 无需模板定制你的 kubernetes 配置
- 定制优化 Nextcloud 镜像
- goim 架构与定制
- “私人定制” CLI 工具
- Docker 定制镜像
- webpack 定制前端开发环境
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
JSP 应用开发详解(第二版)
飞思科技产品研发中心 / 电子工业出版社 / 2004-1-1 / 55.00
本书结合JSP和Servlet的最新规范,从基本的语法和规范入手,以经验为后盾,以实用为目标,以实例为导向,以实践为指导,深入浅出地讲解了JSP 开发中的种种问题。以精简的内容介绍了JSP的语法、Servlet技术、JDBC技术、标签库技术、表达式语言、Struts、JavaServer Face等技术;对于JSP开发中常遇到的典型的难点,专门设置了专题进行集中讨论。本书的最后一篇围绕一个电子商务......一起来看看 《JSP 应用开发详解(第二版)》 这本书的介绍吧!