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.
Related
in my react project, in the SRC directory I have components directory, which contains components folders, every component folder has react component (JSX) and a CSS file, I found that the CSS styles in a component folder overlap with other components styles, although I'm only importing it in the JSX file that I want to use the styles for, why is that happening? like I want to have a CSS file for every component separately
Do you have experience in pure HTML, CSS, and JS before? CSS rules are global.
The closest to what you are looking for is CSS module, if you are using Create React App, it is supported out of the box.
At the end of the day all your styles are compiled into a global stylesheet, specifically in multiple style tags spread across the application which are scoped to the global app.
If you need to scope styles to components, you need to use something like styled components.
Take a look at this post that might help you understand it better.
https://blog.logrocket.com/styling-in-react-4-ways-style-react-app/
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
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';
I have in styles in angular-cli.json "../node_modules/bootstrap/dist/css/bootstrap.min.css". Why when I remove these lines and I add to every css in every component #import "{correct path to every directory/node_modules/bootstrap/dist/css/bootstrap.min.css}"it doesn't work as before?
The styles from styles.scss or included in the angular-cli.json work globally on the page, whereas when imported - they work only for the specific component.
That being said, it's probably not working for you, because bootstrap adds some styles to i.e. <html> or <body> elements and your components cannot style these.
Most likely your AppComponent's locator (app-root or so) is placed inside <body>. It cannot style parents.
Bootstrap should be imported once in your global stylesheet, then bootstrap classes/components may be used in your entire application.
Styles imported in component decorators are encapsulated (by default) and should be used inside given component only. When you try to import Bootstrap to all your components, generated stylesheet is repeated many times.