test/element-plus
1
0
Fork 0
mirror of https://gitee.com/element-plus/element-plus.git synced 2024-12-03 03:38:41 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

docs(docs): fix custom theme doc (#4156)

Browse Source 
* docs(docs): fix custom theme doc

fix #4148

* docs(docs): add on-demand  import use, compatible with full use
This commit is contained in:
辛宝Otto 2021-11-02 14:13:04 +08:00 committed by GitHub
parent c1621a5164
commit 4c4666d65a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 19 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
docs/en-US/guide/theming.md
View File

@ -80,7 +80,9 @@ If your project also uses SCSS, you can directly change Element Plus style varia
),
);
@import "element-plus/theme-chalk/src/index.scss";
// If you just import on demand, you can ignore the following content.
// if you want to import all styles:
// @use "element-plus/theme-chalk/src/index.scss" as *;
```
Then in the entry file of your project, import this style file instead of Element's built CSS:
@ -113,13 +115,17 @@ app.use(ElementPlus)
If you are using vite, and you want to custom theme when importing on demand.
Use `scss.additionalData` to compile variables with scss of every compoent.
Use `scss.additionalData` to compile variables with scss of every component.
```ts
import path from 'path'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// You can also use unplugin-vue-components
// import Components from 'unplugin-vue-components/vite'
// import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
// or use unplugin-element-plus
import ElementPlus from 'unplugin-element-plus/vite'
// vite.config.ts
@ -138,6 +144,17 @@ export default defineConfig({
},
plugins: [
vue(),
// use unplugin-vue-components
// Components({
// resolvers: [
// ElementPlusResolver({
// importStyle: "sass",
// // directives: true,
// // version: "1.2.0-beta.1",
// }),
// ],
// }),
// or use unplugin-element-plus
ElementPlus({
useSource: true,
}),