问题描述
这个 GatsbyJS/antd 插件页面 (https://github.com/bskimball/gatsby-plugin-antd/issues/2) 使得在使用 GatsbyJS 时似乎有一种方法可以编辑 ant.design (antd) 主题.提供的代码是
This GatsbyJS/antd plugin page (https://github.com/bskimball/gatsby-plugin-antd/issues/2) makes it seem that there is a way to edit ant.design (antd) themes when using GatsbyJS. The code that is provided is
plugins: [
{
resolve: 'gatsby-plugin-antd',
options: {
style: true
}
}
]
但是没有其他信息.在哪里可以更改主题原色等内容(如所述:https://ant.设计/文档/反应/自定义主题).ant.design 页面(https://ant.design/docs/react/customize-theme) 表示通过执行以下操作来更改原色:
But there is no additional information. Where would one make changes to things like the theme primary color (as described: https://ant.design/docs/react/customize-theme). The ant.design page (https://ant.design/docs/react/customize-theme) says to make the primary color change by doing the following:
"theme": {
"primary-color": "#1DA57A",
},
目前尚不清楚在 GatbsyJS 中将在哪个文件中设置这样的变量.
It is not clear in what file such a variable would be set in GatbsyJS.
推荐答案
GitHub repo with an example: https://github.com/uciska/gatsby-less-v2.要使 Antd 工作,必须对三个 Gatsby 文件进行更改.
GitHub repo with an example: https://github.com/uciska/gatsby-less-v2. To get Antd working changes must be made to three Gatsby files.
示例 gastby-config.js:
Example gastby-config.js:
module.exports = {
siteMetadata: {
title: 'My site'
},
plugins: [
{
resolve: `gatsby-plugin-less`,
options: {
javascriptEnabled: true,
modifyVars: {
'primary-color': '#da3043',
'font-family': 'Arial',
'layout-body-background': '#66ff79'
}
}
}
]
}
示例 gastby-node.js:
Example gastby-node.js:
exports.onCreateBabelConfig = ({ actions }) => {
actions.setBabelPlugin({
name: 'babel-plugin-import',
options: {
libraryName: 'antd',
style: true
}
})
}
示例 package.json:
Example package.json:
{
"name": "gatsby-starter-hello-world",
"description": "Gatsby hello world starter",
"license": "MIT",
"scripts": {
"develop": "gatsby develop",
"build": "gatsby build",
"serve": "gatsby serve"
},
"dependencies": {
"antd": "^3.6.4",
"babel-plugin-import": "^1.8.0",
"gatsby": "next",
"gatsby-plugin-less": "next",
"less": "^3.0.4",
"less-loader": "^4.1.0",
"react": "^16.3.2",
"react-dom": "^16.3.2",
"react-apollo": "^2.1.11"
}
}
这篇关于使用 GatsbyJS 时更改 Antd 的主题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!