Vuejs Scoped applies to the who application instead to one component as per documentation. It does not work for imports, i does not why? or maybe it is supposed to be like that?
<style scoped>
#import url("https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css");
</style>
I want to do the following;
Use both Bulma and Vuetify together
Use any style i want in any component ireegardless of the main style imported in main.js
Related
I've imported some CSS files with
<style scoped>#import "../assets/XYZ.css";</style>
in different components. Now whenever I switch components the CSS from the other component is loading as well. Let's say I switch from Home.Vue to Blog.Vue, then Home.Vue's CSS file will be imported into Blog.Vue too. Whenever I refresh, everything seems to be fixed. Adding scoped doesn't seem to work for me.
I am using vue-router to switch between components.
This is my relevant code:
main.js
import './assets/main.css';
^ This is a css file to be used across my website on every component
Home.Vue
<style scoped>#import "../assets/home.css";</style>
Blog.Vue
<style scoped>#import "../assets/blog.css";</style>
I'd like to have scoped style & unscoped style in the same .vue file at the same time. The reason is because I have some component specific style that I want to be scoped, but also some vue-boostrap custom style that I'd like to apply, but because the elements are in another component (the vue-bootstrap one), if I scope this style it won't work. However, this custom bootstrap styles are specific to this component, so I'd like to have the CSS written in this same file, to avoid files hell.
So I'd like to have <style lang="scss"> and <style lang="scss" scoped> at the same time. But when I do, it only takes the scoped one. Any ideas ?
You can load scss files in your script part of your Vue component
typescript
import "#/path/to/style.scss"
javascript
require("#/path/to/style.scss")
that way you can have load multiple style sheets into your component at once.
I would like to add html content from the database (so that a part of the page content can be changed externally).
How to add SCSS styling? I use v-html like this but I ahve no idea how to add the style:
<div v-html="ct"></div>
async created() {
this.ct = await this.getPage("blabla");
}
I would prefer not to add the SCSS part in the vuejs style and I already have some other CSS for the other part of the code, but if necessary, the style could be defined in these assets
<style lang="scss" scoped>
#import '~assets/styles/core';
</style>
I found some answers but it doesn't seem like the style comes from another source
Vue.js style v-html with scoped css
or
Add CSS style to v-html
When using scoped CSS, Vue creates dynamically generated selectors to reference elements. However, v-html content does not get dynamically generated selectors, because Vue is not dynamically creating that HTML, but instead just dumping it in. Therefore, if you're using v-html, scoped styles defined within the parent component(s) will not be applied to the child components without the use of deep selectors.
You either need to keep your styles global, import your stylesheet via your Webpack config so that the classnames aren't altered by Vue to match the Vue instances' dynamic selectors, or take the styles specific to the v-html child elements and rewrite them to use deep selectors.
I'm building a project with .vue files which make it possible to write the CSS (SASS), JS and HTML in the same file.
I've decided to have some global components written in SASS on a assets/styles/app.scss file which will load my grid, variables and mixins.
On top of that, I want to be able to write some local SASS rules depending the component / page I'm on, seems pretty logical to want both in a project ...
Locally it looks like this:
<template>
</template>
<script>
</script>
<style lang="scss">
#import "assets/styles/app";
.my-style {
color: $my-variable;
}
</style>
It actually works, for instance I can use $my-variable in my local .vue file or any mixin I want. The problem is a VueJS project will grow and components will go together to display a page.
I noticed the global styling was loaded on each component, and the same rule is present in 5x, 10x when I open my chrome developer tool. This is still a very small project; all my styles are basically duplicated and loaded by the browser each time I add a component to the same page.
How do you avoid to load multiple times the global styles, while being able to use global SASS code in each components?
I've never worked with local mixed with global styling before, I preferred to just abstract totally the styling into a separated structure, but this is way more convenient to code with everything local in the same place.
What am I doing wrong here?
Detail: I'm on NuxtJS but I believe this issue is more related to VueJS overall.
Basically, every time you do an #import in your components it appends another copy to the main CSS file that Webpack generates.
Assuming you have the Webpack SCSS loader properly configured (which I believe you do since it compiles), you should be able to import the SCSS file once in your app.vue and the SCSS compiler will find it when it appends all other CSS.
For example, getting global fonts and mixins:
<style lang="scss">
#import url('https://fonts.googleapis.com/css?family=Lato:300,400,400i,700,900&subset=latin-ext');
#import "#/scss/mixins.scss";
</style>
Then create your CSS for each component inside the component's <style> section. Just make sure you add the lang="scss" so it all compiles.
You might also want to look into scss-resource-loader for Webpack. I think this is in the newest CLI builds, not sure about Nuxt.
in App.vue
<style lang="scss">
#import "assets/styles/common.scss";
</style>
OR
import compiled sass to css file in main.js
import './assets/styles/common.css';
Am trying upgrade my project from angular JS to angular 4. I have style sheets which i have used in angular JS project.
This is my folder structure
I created components using angular CLI.
Everything works perfect but i don't know how to use my styles in angular 4 project.
Can some one explain how i can use my styles globally? and also only in certain components?
You can add your styles within the angular-cli.json:
"styles": [
// Your styles go here
]
This is for global styles. Local styles (for a certain component) are within the accordant CSS-file, which belongs to your component, e.g. foo.component.css. By default each component has the following annotation:
#Component({
selector: 'app-foo',
templateUrl: './foo.component.html',
styleUrls: ['./foo.component.css'],
})
So, foo.component.css contains the CSS for the component FooComponent.
Take a look here:
Component Styles
Global styles
Apart from adding the css file to angular-cli.json as shown by #pzaenger you can also add it to index.html page of your app as shown below :-
<link rel="stylesheet" type="text/css" href="node_modules/bootstrap/dist/css/bootstrap.min.css" />
OR
you can even import it into an existing CSS file in your app by adding the #import statement at the top of that file as shown below :-
#import "~bootstrap/dist/css/bootstrap.min.css";
This way you can also add CDN links of the CSS file which cannot be done in angular-cli.json file. You can find a more elaborated explanation at this link.