热门标签 | 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引用



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

   



推荐阅读
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社区 版权所有