Comments (8)
I found the export file (dist/contentScripts/style.css
), namespace is el
startwith
from vitesse-webext.
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
);
from vitesse-webext.
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 *;`,
},
},}
from vitesse-webext.
I found that all the element plus component class prefixes are customized by me, but the stylesheet is not a custom prefix, it is an el prefix
<el-config-provider namespace="ec">
// some code
</el-config-provider >
from vitesse-webext.
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)
from vitesse-webext.
mini repo : https://github.com/QC2168/webext-ele-import-bug
from vitesse-webext.
Solved!
from vitesse-webext.
can you share your solution to help others?
from vitesse-webext.
Related Issues (20)
- Vite server did not start HOT 3
- The options page will display an error after using vue-i18n HOT 3
- Fix HMR in contentScript App by using an iframe HOT 1
- React port of Vitesse-webext HOT 1
- insecure sources are not allowed in content_security_policy.extension_pages (Firefox) HOT 1
- community version that supports Manifest V3 HOT 2
- [webext-bridge] No handler registered in 'content-script' to accept messages with id 'get-name' HOT 1
- Vue.js not detected by Vue dev tools HOT 1
- Why new tab 'Document' is opened on startup? HOT 1
- Vite Server did not start - error when zipping and trying on another pc HOT 1
- Invalid assets URL in dev mode HOT 5
- e2e basic tests fails HOT 2
- Reactive storage infinite loop caused by race conditions HOT 2
- element-plus styles lose HOT 5
- Popup & Option doesn't work when after build. HOT 3
- Vite server did not start HOT 1
- error on openOptionsPage HOT 7
- docs: update components README plugin name and link HOT 1
- Sidepanel example HOT 5
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vitesse-webext.