How to change the element plus class namespace
QC2168 opened this issue · comments
_island commented
I looked at the element-plus docs, I try the office guide.
But it didn't work, and neither did it when I tried to import the index.scss file manually
_island commented
_island commented
src/styles/element/index.scss
$--colors: (
"primary": (
"base": #9B55FD,
),
"success": (
"base": #1dc779,
),
"warning": (
"base": #ffb302,
),
"danger": (
"base": #e26237,
),
"error": (
"base": #cf4444,
),
"info": (
"base": #42b8dd,
),
);
// we can add this to custom namespace, default is 'el'
@forward "element-plus/theme-chalk/src/mixins/config.scss" with (
$namespace: "ec"
);
// You should use them in scss, because we calculate it by sass.
// comment next lines to use default color
@forward "element-plus/theme-chalk/src/common/var.scss" with (
// do not use same name, it will override.
$colors: $--colors,
);
// if you want to import all
// @use "element-plus/theme-chalk/src/index.scss" as *;
// You can comment it to hide debug info.
// @debug $--colors;
// custom dark variables
@use "./dark.scss";
src/styles/element/dark.scss
// only scss variables
$--colors: (
"primary": (
"base": #9B55FD,
),
);
@forward "element-plus/theme-chalk/src/dark/var.scss" with (
$colors: $--colors
);
_island commented
src/styles/index.ts
import '@unocss/reset/normalize.css'
import 'uno.css'
import 'element-plus/dist/index.css'
// manual import
import './element/index.scss'
import './scrollbar.css'
I tried this code, and it didn't work
// vite.config.ts
css: {
preprocessorOptions: {
scss: {
additionalData: `@use "~/styles/element/index.scss" as *;`,
},
},}
_island commented
_island commented
My contentScript code
// mount component to context window
const container = document.createElement('div')
container.id = __NAME__
const root = document.createElement('div')
const styleEl = document.createElement('link')
const shadowDOM = container.attachShadow?.({ mode: __DEV__ ? 'open' : 'closed' }) || container
styleEl.setAttribute('rel', 'stylesheet')
styleEl.setAttribute('href', browser.runtime.getURL('dist/contentScripts/style.css'))
shadowDOM.appendChild(styleEl)
shadowDOM.appendChild(root)
document.body.appendChild(container)
const app = createApp(DrawerApp)
setupApp(app)
app.mount(root)
_island commented
mini repo : https://github.com/QC2168/webext-ele-import-bug
_island commented
Solved!
Tmk commented
can you share your solution to help others?