@hlcloud/custom-themes

用于多个 app 公用的样式文件

用法

添加依赖

pnpm add @hlcloud/custom-themes

自定义主题

import '@hlcloud/custom-themes/element-plus';
import '@hlcloud/custom-themes/antd';
import '@hlcloud/custom-themes/tdesign';

element-plus 主题

文件目录

packages/custom-themes/src/element-plus/index.scss 自定义样式
packages/custom-themes/src/element-plus/variables.scss 主题变量
packages/custom-themes/src/element-plus/reset.scss 重置样式

打包后文件目录

packages/custom-themes/dist/element-plus/index.css 包含element-plus主题的样式文件
packages/custom-themes/dist/element-plus/src/variables.scss 主题变量源文件
packages/custom-themes/dist/element-plus/src/index.scss 自定义样式源文件

使用方法

1. 全局引入

import '@hlcloud/custom-themes/element-plus';
or
import '@hlcloud/custom-themes/element-plus/src/index.scss';

2. Vite按需引入

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';

// https://vitejs.dev/config/
export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "@hlcloud/custom-themes/element-plus/src/variables.scss" as *;`
      }
    }
  },
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()]
    }), // 如果是全局引入则无需配置这个ElementPlusResolver()
    Components({
      resolvers: [ElementPlusResolver({ importStyle: 'sass' })]
    }) // 如果是全局引入则无需配置这个ElementPlusResolver()
  ],
  // ...
});

tdesign 主题

文件目录

packages/custom-themes/src/tdesign/index.scss 自定义样式
packages/custom-themes/src/tdesign/variables.scss 主题变量

打包后文件目录

packages/custom-themes/dist/tdesign/index.css 包含tdesign主题的样式文件
packages/custom-themes/dist/tdesign/src/variables.scss 主题变量源文件
packages/custom-themes/dist/tdesign/src/index.scss 自定义样式源文件

使用方法

1. 全局引入

import '@hlcloud/custom-themes/tdesign';
or
import '@hlcloud/custom-themes/tdesign/src/index.scss';

2. Vite按需引入

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { TDesignResolver } from 'unplugin-vue-components/resolvers';

// https://vitejs.dev/config/
export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "@hlcloud/custom-themes/tdesign/src/variables.scss" as *;`
      }
    }
  },
  plugins: [
    vue(),
    AutoImport({
      resolvers: [TDesignResolver()]   // 如果是全局引入则无需配置这个TDesignResolver()
    }),
    Components({
      resolvers: [TDesignResolver()] // 如果是全局引入则无需配置这个TDesignResolver()
    })
  ]
})