antd组件样式局部加载,用react-app-rewired插件应该怎么配置?
package.json配置:
{
"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"
]
}
想实现的目标效果:
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 (
<div className='App'>
<Button type='primary'>
Primary
</Button>
<Banner/>
<Router>
<header className='title'>
{routes.map((r, key) => {
if (r.text) {
return <Link key={key} to={r.path}>
{r.text}
</Link>
}
})}
</header>
{routes.map((route, key) => {
if (route.exact) {
return <Route
key={key}
exact
path={route.path}
render={props => (
<route.component {...props} routes={route.routes} />
)} />
}else {
return <Route key={key} path={route.path} render={props => (
<route.component {...props} routes={route.routes} />
)} />
}
})}
</Router>
</div>
)
}
}
export default App
直接引入下面这句,样式就有了,不需要全局引入完整的antd样式,查阅资料我选用的是react-app-rewired方案
import { Button } from 'antd'
config-overrides.js 配置如下
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引用
各位朋友走过路过给个思路谢谢!
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论