热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

antd组件样式局部加载,用reactapprewired插件应该怎么配置?

package.json配置:

package.json配置:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
{

  "name": "hawerblog",

  "version": "0.1.0",

  "private": true,

  "dependencies": {

    "antd": "^3.15.0",

    "babel-plugin-import": "^1.11.0",

    "customize-cra": "^0.2.12",

    "less": "^3.9.0",

    "less-loader": "^4.1.0",

    "react": "^16.8.4",

    "react-app-rewire-define-plugin": "^1.0.0",

    "react-app-rewire-less": "^2.1.3",

    "react-app-rewired": "^2.1.1",

    "react-dom": "^16.8.4",

    "react-router-dom": "^4.4.0",

    "react-scripts": "2.1.8",

    "webpack-merge": "^4.2.1"

  },

  "scripts": {

    "start": "set PORT=4000 && react-app-rewired start",

    "build": "react-app-rewired build",

    "test": "react-app-rewired test",

    "eject": "react-scripts eject"

  },

  "eslintConfig": {

    "extends": "react-app"

  },

  "browserslist": [

    ">0.2%",

    "not dead",

    "not ie <= 11",

    "not op_mini all"

  ]

}


想实现的目标效果:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
import React, { Component } from 'react'

import 'antd/dist/antd.css'

import { Button } from 'antd'



import { BrowserRouter as Router, Route, Link } from 'react-router-dom'



import './styles/main.less'



import routes from './routers'



import Banner from './components/banner'



class App extends Component {

  render () {

    return (

     


       

       

       

         

            {routes.map((r, key) => {

               if (r.text) {

                 return

                        {r.text}

                       

               }

             })}

         

          {routes.map((route, key) => {

             if (route.exact) {

               return
                        key={key}

                        exact

                        path={route.path}

                        render={props => (

                                 

                                )} />

             }else {

               return (

                                                       

                                                      )} />

             }

           })}

       


     


    )

  }

}



export default App


直接引入下面这句,样式就有了,不需要全局引入完整的antd样式,查阅资料我选用的是react-app-rewired方案


import { Button } from 'antd'


config-overrides.js 配置如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
const {

  override,

  fixBabelImports,

  addLessLoader,

  addBabelPlugin

} = require('customize-cra')

const path = require('path')

const merge = require('webpack-merge')



const rewireLess = require('react-app-rewire-less')

const rewireDefinePlugin = require('react-app-rewire-define-plugin')



override(

  fixBabelImports('import', {

    libraryName: 'antd',

    libraryDirectory: 'es',

    style: true

  }),

  addLessLoader({

    JavascriptEnabled: true,

    modifyVars: { '@primary-color': '#1DA57A' }

  })

)



module.exports = function override(config, env) {

  config.resolve = {

    ...config.resolve,

    alias: { '@': path.resolve(__dirname, 'src') }

  }

  config.module.rules.push({ test: /\.less$/ }, { test: /\.css$/ })

  return config

}



现在是不知道怎么样才能排除对应css/less 的node_modules引用



各位朋友走过路过给个思路谢谢!

   



推荐阅读
  • 本文详细介绍了如何使用Python中的smtplib库来发送带有附件的邮件,并提供了完整的代码示例。作者:多测师_王sir,时间:2020年5月20日 17:24,微信:15367499889,公司:上海多测师信息有限公司。 ... [详细]
  • 本文详细解析了客户端与服务器之间的交互过程,重点介绍了Socket通信机制。IP地址由32位的4个8位二进制数组成,分为网络地址和主机地址两部分。通过使用 `ipconfig /all` 命令,用户可以查看详细的IP配置信息。此外,文章还介绍了如何使用 `ping` 命令测试网络连通性,例如 `ping 127.0.0.1` 可以检测本机网络是否正常。这些技术细节对于理解网络通信的基本原理具有重要意义。 ... [详细]
  • Spring – Bean Life Cycle
    Spring – Bean Life Cycle ... [详细]
  • Spring Boot 中配置全局文件上传路径并实现文件上传功能
    本文介绍如何在 Spring Boot 项目中配置全局文件上传路径,并通过读取配置项实现文件上传功能。通过这种方式,可以更好地管理和维护文件路径。 ... [详细]
  • com.sun.javadoc.PackageDoc.exceptions()方法的使用及代码示例 ... [详细]
  • 本文介绍如何使用 Python 的 DOM 和 SAX 方法解析 XML 文件,并通过示例展示了如何动态创建数据库表和处理大量数据的实时插入。 ... [详细]
  • 原文网址:https:www.cnblogs.comysoceanp7476379.html目录1、AOP什么?2、需求3、解决办法1:使用静态代理4 ... [详细]
  • 本文介绍了如何利用 `matplotlib` 库中的 `FuncAnimation` 类将 Python 中的动态图像保存为视频文件。通过详细解释 `FuncAnimation` 类的参数和方法,文章提供了多种实用技巧,帮助用户高效地生成高质量的动态图像视频。此外,还探讨了不同视频编码器的选择及其对输出文件质量的影响,为读者提供了全面的技术指导。 ... [详细]
  • 本文详细介绍了 InfluxDB、collectd 和 Grafana 的安装与配置流程。首先,按照启动顺序依次安装并配置 InfluxDB、collectd 和 Grafana。InfluxDB 作为时序数据库,用于存储时间序列数据;collectd 负责数据的采集与传输;Grafana 则用于数据的可视化展示。文中提供了 collectd 的官方文档链接,便于用户参考和进一步了解其配置选项。通过本指南,读者可以轻松搭建一个高效的数据监控系统。 ... [详细]
  • 本文介绍了如何使用Python的Paramiko库批量更新多台服务器的登录密码。通过示例代码展示了具体实现方法,确保了操作的高效性和安全性。Paramiko库提供了强大的SSH2协议支持,使得远程服务器管理变得更加便捷。此外,文章还详细说明了代码的各个部分,帮助读者更好地理解和应用这一技术。 ... [详细]
  • 在CentOS 7环境中安装配置Redis及使用Redis Desktop Manager连接时的注意事项与技巧
    在 CentOS 7 环境中安装和配置 Redis 时,需要注意一些关键步骤和最佳实践。本文详细介绍了从安装 Redis 到配置其基本参数的全过程,并提供了使用 Redis Desktop Manager 连接 Redis 服务器的技巧和注意事项。此外,还探讨了如何优化性能和确保数据安全,帮助用户在生产环境中高效地管理和使用 Redis。 ... [详细]
  • 本文介绍了如何使用 Node.js 和 Express(4.x 及以上版本)构建高效的文件上传功能。通过引入 `multer` 中间件,可以轻松实现文件上传。首先,需要通过 `npm install multer` 安装该中间件。接着,在 Express 应用中配置 `multer`,以处理多部分表单数据。本文详细讲解了 `multer` 的基本用法和高级配置,帮助开发者快速搭建稳定可靠的文件上传服务。 ... [详细]
  • 在Linux系统中避免安装MySQL的简易指南
    在Linux系统中避免安装MySQL的简易指南 ... [详细]
  • 在对WordPress Duplicator插件0.4.4版本的安全评估中,发现其存在跨站脚本(XSS)攻击漏洞。此漏洞可能被利用进行恶意操作,建议用户及时更新至最新版本以确保系统安全。测试方法仅限于安全研究和教学目的,使用时需自行承担风险。漏洞编号:HTB23162。 ... [详细]
  • 深入浅出 webpack 系列(二):实现 PostCSS 代码的编译与优化
    在前一篇文章中,我们探讨了如何通过基础配置使 Webpack 完成 ES6 代码的编译。本文将深入讲解如何利用 Webpack 实现 PostCSS 代码的编译与优化,包括配置相关插件和加载器,以提升开发效率和代码质量。我们将详细介绍每个步骤,并提供实用示例,帮助读者更好地理解和应用这些技术。 ... [详细]
author-avatar
江韦亭君733
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有