老师,请问怎么配置antd的主题?
来源:12-1 PC端页头组件开发
yxnne
2017-12-21
老师好,我之前找着课程一步步一步搭建的环境,现在想改变下antd的主题颜色等看看,但是和antd官网上例子的配置可能不太一样:
官网上说 可以配置在 package.json :
"theme": "./theme.js",
我是尝试了这样加,也写了theme.js文件,但是没有效果。
发现官网上还说:
“定义 theme 属性时,需要配合使用(antd-init 或 dva-cli。如果你使用的是其他脚手架,可以参考 atool-build 中 less-loader 的 webpack 相关配置 ,利用 less-loader 的 modifyVars 配置来覆盖原来的样式变量。”
antd-init 或 dva-cli 我自己这边试过了,它应该是antd提供的一套配置工具,运行之后就帮你把环境搭建好了。这样子固然是可以。
但是我想,用咱们课程里面介绍的方法和配置的基础上来使用改变主题应该也是可以的,不知道下来我应该怎么做呢??
我不是做前端的基础有点不好,希望老师指点 , 谢谢老师
PS:我的package.json====================================================
{
"name": "news_reactdom",
"version": "1.0.0",
"description": "This is a News App coding in React Js,just for my reactdom learnning",
"main": "root.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+https://github.com/yxnne/News_reactdom.git"
},
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com//News_reactdom/issues"
},
"homepage": "https://github.com//News_reactdom#readme",
"dependencies": {
"antd": "^3.0.2",
"babel-cli": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-plugin-react-html-attrs": "^2.1.0",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"css-loader": "^0.28.7",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-responsive": "^4.0.3",
"react-router-dom": "^4.2.2",
"style-loader": "^0.19.1",
"webpack": "^3.10.0",
"webpack-dev-server": "^2.9.7"
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1"
}
}
======================================================================
PS:我的webpack.config.js====================================================
const webpack = require('webpack');
const path = require('path');
module.exports = {
context : __dirname + '/src',
entry : "./js/root.js",
module : {
loaders :[{
test : /.js?$/,
exclude:/(node_modules)/,
loader: 'babel-loader',
query :{
presets:['react' , 'babel-preset-react']
}
},
{
//css模块化设置
test : /\.css$/,
//ant-design样式需要这样
loader : 'style-loader!css-loader'
},
]
},
output:{
path:__dirname + "/src/",
filename:"bundle.js"
},
devServer:{
historyApiFallback:true
}
};
======================================================================
1回答
-
同学你好,建议直接使用 less-loader 进行配置。
可以参见,有其他问题可以问我。
https://medium.com/@GeoffMiller/how-to-customize-ant-design-with-react-webpack-the-missing-guide-c6430f2db10f
052017-12-22
相似问题