使用less-loader与antd按需加载(babel-plugin-import)的坑

Eminjannn 发布于2019-08-26 14:00 / 2682人阅读

摘要：的按需加载设置安装插件修改或新建文件进行编辑，但两者只能存一种根据配置更改主题颜色在中找到原配置注释后更改为定义全局样式配置自定义主题只需修改的颜色，再重启项目即可更改主题颜色

为了在react中使用antd以及它的主题更改，需要在项目中 yarn eject 暴露出webpack文件进行改造

本答案是在日期当时最新的create-react-app上的webpack版本

less-loader的配置 安装less less-loader两个包

yarn add less less-loader

//配置less的变量
const lessRegex = /.less$/;
const lessModuleRegex = /.module.less$/;


 //less配置(模仿css的配置改写)
                       {
              test: lessRegex,
              exclude: lessModuleRegex,
              use: getStyleLoaders({
                  importLoaders: 2,
                  sourceMap: isEnvProduction && shouldUseSourceMap,
              }, "less-loader"),
          },
          {
              test: lessModuleRegex,
              use: getStyleLoaders({
                  importLoaders: 2,
                  sourceMap: isEnvProduction && shouldUseSourceMap,
                  modules: true,
                  getLocalIdent: getCSSModuleLocalIdent,
              },"less-loader"),
          },

设置后可以新建less文件用简单样式去检测是否生效，要记得重启项目。

Babel-plugin-import(antd的按需加载设置) 安装插件

yarn add babel-plugin-import

修改package.json(或新建文件.babellrc进行编辑，但两者只能存一种)

"babel": {
    "presets": [
      "react-app"
    ],
    "plugins": [
      [
        "import",{"libraryName":"antd","style":"css"}
      ]
    ]
  }

根据webpack配置更改antd主题颜色 在webpack.config.js中找到preProcessor

    //原配置

    if (preProcessor) {
      loaders.push({
        loader: require.resolve(preProcessor),
        options: {
          sourceMap: isEnvProduction && shouldUseSourceMap,
        },
      });
    }

注释后更改为

    /**
     * 定义全局样式配置
     */
    if (preProcessor) {
      let loader = require.resolve(preProcessor)
      if(preProcessor === "less-loader") {
        loader = {
          loader,
          options: {
            modifyVars: {
              //自定义主题
              "primary-color": "#1890ff",
            },
            javascriptEnabled: true,
          }
        }
      }
      loaders.push(loader);
    }
    return loaders;
  };

只需修改primary-color的颜色，再重启项目即可更改主题颜色

云服务器 GPU云服务器按需加载按需加载javascript webpack按需加载执行与加载

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/109960.html

通过create-react-app从零搭建react环境

摘要：通过文件可以对图标名称等信息进行配置。注意，注册的只在生产环境中生效，并且该功能只有在下才能有效果该文件是过滤文件配置该文件是描述文件定义了项目所需要的各种模块，以及项目的配置信息比如名称版本许可证等元数据。一、快速开始：全局安装脚手架： $ npm install -g create-react-app 通过脚手架搭建项目： $ create-react-app 开始项目： ...

Cympros 2019-08-02 16:02 评论0 收藏0
通过create-react-app从零搭建react环境

摘要：通过文件可以对图标名称等信息进行配置。注意，注册的只在生产环境中生效，并且该功能只有在下才能有效果该文件是过滤文件配置该文件是描述文件定义了项目所需要的各种模块，以及项目的配置信息比如名称版本许可证等元数据。一、快速开始：全局安装脚手架： $ npm install -g create-react-app 通过脚手架搭建项目： $ create-react-app 开始项目： ...

CoyPan 2019-08-22 18:05 评论0 收藏0
Create-react-app+Antd+Less配置

摘要：说明官方脚手架工具用于快速创建应用，但依旧有局限性，我们根据项目需求需要对的配置进行修改。这里针对引入的两种配置方式进行配置。方案一一个对进行自定义配置的社区解决方案。安装修改启动项在项目根目录创建一个用于修改默认配置。说明 React官方脚手架工具Create-react-app 用于快速创建React应用，但依旧有局限性，我们根据项目需求需要对Create-react-app的配...

solocoder 2019-08-22 17:10 评论0 收藏0
采用React+Ant Design组件化开发前端界面(一)

摘要：基础知识使用脚手架创建项目并启动安装脚手架使用脚手架创建项目为项目名。否则可能导致项目发布上线后，报错无法执行。安装测试使用注意默认情况下安装的需要引入才会生效样式，但很多时候，我们只是使用了部分组件，引入整个样式文件，有些得不偿失。 showImg(http://upload-images.jianshu.io/upload_images/2774022-8d65190f1b972c...

cppprimer 2019-08-30 15:54 评论0 收藏0
学习从零开始搭建React脚手架

摘要：写在前面准备学习一下和相关的东西，官方的脚手架看起来太繁琐，所以打算自己来搭建一个，参考了这个文档从零搭建全家桶框架教程步骤上都差不多第一步，依赖总览完成到我现在半成品的过程中，目前完成开发模式的相关操作，添加了按需加载的地步。写在前面准备学习一下react和webpack相关的东西，官方的脚手架看起来太繁琐，所以打算自己来搭建一个，参考了这个文档从零搭建React全家桶框架教程;...

cod7ce 2019-08-23 11:25 评论0 收藏0