Ant Design 的样式利用了 Less 作为开发语言，并定义了一系列全局/组件的样式变量。我们可以通过覆盖这些变量到达自定义主题的目标。antd官网针对利用less的项目提供了自定义主题的方案，那么利用sass语言的项目怎么自定义主题呢？
1. 定义样式变量文件ant.var.scss
定义样式变量文件ant.var.scss,在内里写入我们要覆盖的样式变量。比如：
$primary-color: #2a83fd; // 全局主色// 字体颜色$text-color: #b2d6ff; // 主文本色$text-color-secondary: #fff; // 次文本色// 字体巨细$font-size-base: 0.14rem;// 行高$line-height-base: 1.5715;// 高度$height-base: 0.32rem;// 边框$border-width-base: 0.01rem;$border-radius-base: 0.02rem;antd 的样式变量有很多，根据自己必要覆盖即可。全部的样式变量参考https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less
2. 定义主题样式文件 theme.less
// 用自定义样式覆盖antd样式@import '~antd/dist/antd.less';@import './antd.var.scss';3. 定义文件 sassVarsToLess.js
定义文件 sassVarsToLess.js,用来将 sass 变量翻译成 less 变量,具体代码如下：
module.exports = function (source) { return source.replace(/\$/gi, '@');};4. 在 webpack 中设置
{ test: /\.less$/, use: [ { loader: "style-loader" }, { loader: "css-loader" }, { loader: "less-loader", options: { javascriptEnabled: true } } ] }, { test: /\.scss$/, issuer: { exclude: /\.less$/, }, // ... }, { test: /\.scss$/, issuer: /\.less$/, use: { loader: './sassVarsToLess.js' } },5. babel 设置
{ "presets": [ // ... ], "plugins": [ // ... ["import", { "libraryName": "antd", "libraryDirectory": "lib" }] ]}至此，我们便完成了通过自定义样式变量文件ant.var.scss,来覆盖默认的 Ant Design 样式变量。 |
