I am trying to essentially embed a Vue component into another one from a remote source (npm), without using a Vue Plugin. The components are mounting as expected, however, because the embedded component uses Vuetify, it's style is polluting the style of the "parent" application Here's some images that hopefully illustrate what i mean:
Note the primary colors of the root application before mounting the embedded component
Upon mounting of the Login (embedded) component:
I tried the strategy mentioned here, using less in the embedded component to import the vuetify css at a block level, but it doesn't seem to be working for me.
I realize that, in the end, I could ultimately solve this by ensuring the embedded theme matches the root applications theme, but I'd rather not have to rely on that. If my component is being built with webpack, why am I unable to apply Vuetify's css to just that component? Any suggestions?
happy to include code if necessary
To use with vue.js install postcss-parent-selector
npm i postcss-parent-selector -D
then create a postcss.config.js file in root and add following code
module.exports = {
plugins: [
require("postcss-parent-selector")({
selector: ".mywrapperclass",
}),
],
};
Then in public/index.html add a wrapper element around the app:
<div class="mywrapperclass">
<div id="app"></div>
</div>
Some links:
https://vue-loader-v14.vuejs.org/en/features/postcss.html
https://www.npmjs.com/package/postcss-parent-selector
https://github.com/postcss/postcss
I am currently having the same issue with my application. The possible solutions I've came up with are:
-Embedding the child Vue application via iframe and using a library like vuex-iframe-sync to pass props between Vuetify root app and the child app.
-Disabling Vuetify theme alltogether and perhaps customize components on my own:
// src/plugins/vuetify.js
import Vue from 'vue'
import Vuetify from 'vuetify/lib'
const vuetify = new Vuetify({
theme: { disable: true },
})
-Another option was using webpack config to run a PostCSS plugin and possibly add prefixes to Vuetify's global styles while bundling the app, but I couldn't figure out how.
Please let me know if you make any progress on this topic!
Related
welcome to my ***** problem
I am spending some days trying to resolving something.
I am trying to create a webpage editor with Grapes JS, React JS and Vite everything was wonderful until the kingdom of creating different themes appears...
The themes are in different plugins, this plugins are in the project running from the react app, my problem is when i try to load a css file in the directory of the plugin :
import styles from "../../dist/main.css";
const cssStyle = document.createElement("style");
cssStyle.innerHTML = styles ;
const doc = iframe.contentDocument;
const f = setInterval(() => {
if (doc.readyState === "complete") {
doc.head.appendChild(cssStyle);
clearInterval(f);
}
}, 100);
This styles are apply globally in my react app and i only want to inject in a iframe, in the head tag.
Is any way to load a css file in react without compile globally this css file?
Thanks by the help
Vite automatically injects CSS styles into the page when you import a .css file. Quite helpful... until it's not. From what you describe I'm betting that is the culprit.
There is a way to disable that behavior: it looks like adding ?inline to the filename will disable the injection and just grab the file contents. So your first line would look like this:
import styles from "../../dist/main.css?inline";
That should give you styles as a pure string, and the rest of your code should then work.
P.S. Welcome to StackExchange :)
I am creating a component library where I do not want to have global CSS. Therefore, every component is scoped.
When running the production build via
vue-cli-service build --target lib --name sc components/index.js, everything is compiled into sc.css and dist/css/1.392e001d.css.
If possible, I want to keep the css and/or scss combined with the vue file or js.
The reason I want to do this is to enable users of the library to import a singular component from the library. The users could then use the component anywhere without having to import/include a css file.
If this is not possible, is there a way to accomplish the desired functionality?
From the Vue CLI docs for css.extract:
When building as a library, you can also set this to false to avoid your users having to import the CSS themselves.
// vue.config.js
module.exports = {
css: {
extract: false
}
}
I want to publish a ui library using react. But I'm confuse about how to deal with styles.
For example, if I write code in a project.I will using webpack && babel to build my code, and it will create a *.css file.
import React from 'react';
import './index.less';
export default function() {
return (
<div>
123
</div>
)
}
But, if I just write react compoents, I will use babel to compile my code.There is not css-loader to deail with *.less file. And after compiling, there is requre('./index.less') in the code, but it can't find file. So if I still want to write my code like above, how can I to publish this comonents with *.css.
Have you looked into available options there are around styling components in React? Because there are a lot of options here and it comes down to what you prefer. Just a quick google search will give you many options.
My personal favorite package to use is the styled-components one.
I am trying to set up the conjunction of Atom editor, Sass, Typescript and Aurelia. This question is about Aurelia (installed via aurelia-cli) and its building system, I guess.
Well, I wrote style.sass for my component, then I required it in the component's view (app.html, for instance) as style.css. Fine, it works. But the content of compiled style.css gets included in index.html as internal styles, I mean everything goes inside <style>-tag, not through <link>. Also it seems that the corresponding .css file is never created at all. The stream just includes its content right in <style>-tag inside index.html.
How could I make Aurelia include my styles as external styles via <link>? In building task the last action is a build-plugin coming from aurelia-cli which is kinda black-box for me. Also aurelia.json is imported, so there should be a way to configure the needed behavior. A quick search didn't give me the answer, so here I am.
This is probably not the best solution, and not completely what you want, but perhaps it helps. You can do the following (I took a new TypeScript project):
First remove the css includes from your views.
Then, adjust the ./aurelia_project/tasks/process-css.ts task as follows:
import * as gulp from 'gulp';
import * as sourcemaps from 'gulp-sourcemaps';
import * as sass from 'gulp-sass';
import * as project from '../aurelia.json';
import {build} from 'aurelia-cli';
export default function processCSS() {
return gulp.src(project.cssProcessor.source)
.pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest(project.platform.output));
};
This will output CSS files in the ./scripts folder. Then, adjust the aurelia_project/aurelia.json file as follows (remove css):
{
"name": "app-bundle.js",
"source": [
"[**/*.js]",
"**/*.{html}"
]
},
In your index.html you can now include the generated styles (or even in your components views).
I am using a third party javascript library in my angular2 component. The skin css of the component tries to load images using relative url paths. I am using a component based architecture and likes to have all the component dependencies encapsulated.
Below is what I try to do, the skins library fails to locate the relative path images.
#Component({
moduleId: module.id,
selector: 'test',
templateUrl: 'test.html',
styleUrls: ['test.css', '../../external_lib/skins/skyblue.css'],
encapsulation:ViewEncapsulation.None
})
Is there any way to accomplish this ?
Currently the only workaround is to include the css in the index.html file.
When it comes to defining styles and template like styleUrl and templateUrl you should be very careful.
The problem is that it is your responsibility to make sure that given url will be accessible even after build.
To make it happen you can make your own task in grunt, gulp, npm or some other task runner or use bundler like webpack to use relative path which then will be translated to the production build.
In your example you have to point styleUrl to the path when it's located while serving whole app.