React配置less与antd定制主题

栏目: 服务器 · 发布时间: 5年前

内容简介:在配置less之前,我使用解构后,我得到的webpack版本为

一、配置less

在配置less之前,我使用 create-react-app ,得到 React 版本为 ^16.8.6

  1. 安装依赖并解构目录:(可以在命令前加 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.3config 文件夹长这样:

React配置less与antd定制主题

于是,打开 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定制主题

完~若有不足,请多指教,万般感谢!


以上所述就是小编给大家介绍的《React配置less与antd定制主题》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

JSP 应用开发详解(第二版)

JSP 应用开发详解(第二版)

飞思科技产品研发中心 / 电子工业出版社 / 2004-1-1 / 55.00

本书结合JSP和Servlet的最新规范,从基本的语法和规范入手,以经验为后盾,以实用为目标,以实例为导向,以实践为指导,深入浅出地讲解了JSP 开发中的种种问题。以精简的内容介绍了JSP的语法、Servlet技术、JDBC技术、标签库技术、表达式语言、Struts、JavaServer Face等技术;对于JSP开发中常遇到的典型的难点,专门设置了专题进行集中讨论。本书的最后一篇围绕一个电子商务......一起来看看 《JSP 应用开发详解(第二版)》 这本书的介绍吧!

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

MD5 加密
MD5 加密

MD5 加密工具

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具