基于 electron-react-boilerplate 之ant.design 主题定制

[huangshuwei]

前言

上一篇介绍了使用 electron-react-boilerplate模板基本的样式使用问题。现在咱们看下项目中使用了 ant.design 如何进行主题定制

这个问题本质是如何引入 less文件，具体看下文

ant.design 主题定制方式

这是官方主题定制文章，其中最简单的方式是覆盖ant.design主题的less 文件。然而 electron-react-boilerplate模板并没有less文件的配置，下面我们要进行改造

安装并配置 less loader

yarn add less less-loader

配置开发环境loader。这里特别要注意的事，我们要让less 文件也遵循 electron-react-boilerplate模板的css module方式。
即：.global.less可以作为全局的样式使用，而.less文件要遵循css module方式。

明白规则后配置如下：

// webpack.config.renderer.dev.babel.js
// [custome] Add LESS support-当是 .global.less 文件时,作为全局样式引入
            {
                test: /\.global\.less$/,
                use: [
                    {
                        loader: 'style-loader'
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true,
                            importLoaders: 1
                        }
                    },
                    {
                        loader: 'less-loader',
                        options: {
                            sourceMap: true,
                            javascriptEnabled: true
                        }
                    }
                ]
            },
            // [custome] Add LESS support-当是非 .global.less 文件时，作为css module样式引入
            {
                test: /^((?!\.global).)*\.less$/,
                use: [
                    {
                        loader: 'style-loader'
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            modules: {
                                localIdentName:
                                    '[name]__[local]__[hash:base64:5]'
                            },
                            sourceMap: true,
                            importLoaders: 1
                        }
                    },
                    {
                        loader: 'less-loader',
                        options: {
                            sourceMap: true,
                            javascriptEnabled: true
                        }
                    }
                ]
            },

生产发布模式基本同理，只不过样式要进行压缩配置：

// [custome] Add LESS support-当是 .global.less 文件时,作为全局样式引入
            {
                test: /\.global\.less$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true,
                            importLoaders: 1
                        }
                    },
                    {
                        loader: 'less-loader',
                        options: {
                            sourceMap: true,
                            javascriptEnabled: true
                        }
                    }
                ]
            },
            // [custome] Add LESS support-当是非 .global.less 文件时，作为css module样式引入
            {
                test: /^((?!\.global).)*\.less$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            modules: {
                                localIdentName:
                                    '[name]__[local]__[hash:base64:5]'
                            },
                            sourceMap: true,
                            importLoaders: 1
                        }
                    },
                    {
                        loader: 'less-loader',
                        options: {
                            sourceMap: true,
                            javascriptEnabled: true
                        }
                    }
                ]
            }

添加主题重置 less文件

我们暂且命名为antd-theme-reset.global.less,大致形式如下，具体请参考ant.design官网:

// antd-theme-reset.global.less
@import '~antd/dist/antd.less';
@primary-color: #ea5404; // 全局主色
@link-color: orange; // 链接色
@success-color: #52c41a; // 成功色
@warning-color: #faad14; // 警告色
@error-color: #f5222d; // 错误色
@font-size-base: 14px; // 主字号

在入口文件引入此样式重置文件：

// index.tsx
import '你的目录/antd-theme-reset.global.less'

重新运行

webpack 相关文件修改，需要重新运行

-完-

[espring]

谢谢! 参考您的文章解决了问题.

补充一点, 因为安装最新版本的less-loader是6.x, 上述配置需要稍做修改:

                javascriptEnabled: true
// 改成
              lessOptions: {
                javascriptEnabled: true
              }

参考: ant-design/ant-design-landing#235

[huangshuwei]

感谢反馈