@pluve/antd-rest

基于后台设计规范（1366*768）为参考，重置了antd的样式 基于运营门户紧凑版为参考，重置了antd的样式

简介

本文只针对 antd@4、ant-design-vue@3的组件库进行内部的规范样式调整，antd@5暂未支持。

安装

yarn add @pluve/antd-rest

npm install @pluve/antd-rest

文档

查看文档

使用

1.导出 modifyVars 变量

import { theme } from '@pluve/antd-rest';
// 或者
const { theme } = require('@pluve/antd-rest');

// 如需要紧凑版的样式变量
import { setThemePrefix } from '@pluve/antd-rest';

const theme = setThemePrefix({
  // 紧凑模式
  compact: true,
  // 是否不带@符号
  stripPrefix: true,
});

2.引入个性化样式文件

// 可以在入口ts文件内引入
import "@pluve/antd-rest/dist/style/antd-rest.min.css";
// 也可以在入口css或者全局css内引入
@import "~@pluve/antd-rest/dist/style/antd-rest.min.css";

// 紧凑模式的css
import "@pluve/antd-rest/dist/style/antd-rest.compact.min.css";

3.通过 less 的 modifyVars 进行变量覆盖

webpack

module.exports = {
  rules: [
    {
      test: /\.less$/,
      use: [
        // ...其他loader
        {
          loader: 'less-loader',
          options: {
            lessOptions: {
              javascriptEnabled: true,
              modifyVars: {
                ...theme,
              },
            },
          },
        },
      ],
    },
  ],
};

注意

• lessOptions 最低版本需要 [email protected]。

create-react-app + customize-cra

// config-overrides.js
const { override,addLessLoader } = = require("customize-cra");

module.exports = override(
    addLessLoader({
          lessOptions: {
            javascriptEnabled: true,
            modifyVars: { ...theme },
      },
    })
)

注意

• 因为 create-react-app 与 react-app-rewired 是基于 webpack4 来开发的,所以 less-loader 的版本也不能太高，推荐 6 - 7 的版本。

vite

// vite.config.ts
import { defineConfig } from 'vite';
export default () => {
  defineConfig({
    plugins: [
      Components({
        resolvers: [
          AntDesignVueResolver({
            importStyle: 'less',
            resolveIcons: true,
          }),
        ],
      }),
    ],
    css: {
      preprocessorOptions: {
        less: {
          javascriptEnabled: true,
          modifyVars: {
            ...theme,
          },
        },
      },
    },
  });
};

其他功能

1.如何获取插件内使用到的 less 变量文件？

@import "~@pluve/antd-rest/dist/style/antd-rest.var.less"

// 紧凑模式
@import "~@pluve/antd-rest/dist/style/antd-rest.compact.var.less"

2.如何获取theme的数据，不带有@符号？

import { setThemePrefix } from '@pluve/antd-rest';
const theme = setThemePrefix(true);
//  { 'primary-color': '#1890ff', ... }

说明

如在使用中遇到样式不符合或未按照 UI 规范重写的问题，请在前端群反馈。