How to use deep selector in scss in vue?
The code below not work.
<style lang="scss" scoped>
.a{
&>>>.b{
...
}
}
</style>
A deep selector like >>> in css but in scss inside vue single file component.
I had the same issue, and i eventually fix this using ::v-deep as stated here:
https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors
<style lang="scss" scoped>
.v-input {
::v-deep .v-text-field__details {
min-height: 0;
margin: 0;
.v-messages {
min-height: 0;
}
}
}
</style>
From the vue docs:
"Some pre-processors, such as Sass, may not be able to parse >>> properly. In those cases you can use the /deep/ combinator instead - it's an alias for >>> and works exactly the same."
So try this:
<style lang="scss" scoped>
.a {
/deep/ .b {
...
}
}
</style>
Related
I get error undefined mixin when i use #include in components
I work in NuxtJs, install sass-loader, node-sass
Component
<style lang="scss">
.cardSmall {
#include mq(laptop) {
width: 720px;
}
}
</style>
My mixin in assets/variables.scss
#mixin mq($breakpoint) {
#if $breakpoint==laptop {
#media only screen and (max-width: 991px) {
#content
};
}
}
Nuxt imports several things automatically such as components and composables. But it doesn't auto-import (sass) mixins. Therefore you need to add an import to the top of your <style /> tag:
<style lang="scss">
#use "#/assets/variables.scss";
// ...
</style>
I have installed sass loader in my vue 3 project, but the issue is that I want to import variables from another file, but doesn't work
my schema is:
src
assets
scss
styles.scss
_variables.scss
styles.scss
#import url('./_variables.scss');
body{
font-family: 'Montserrat';
background-color: $primary-black;
}
.sidebar{
width: 250px;
height: 100vh;
max-height: 100vh;
background-color: $primary-black;
}
_variables.scss
$primary-black: #222222;
App.vue
Some HTML
<script>
import Sidebar from './components/Sidebar';
export default {
components: { Sidebar },
setup() {
},
}
</script>
<style lang="scss" scope>
#import url('./assets/scss/styles.scss');
</style>
And the issue is that in the browser the $primary-black variable fails, it appears background-color: $primary-black literally, I mean doesn't take de "#222222" color instead, but if I change the variable, and put it inside the styles.scss file, it works, so I'm not sure what could be the problem
Do not use the url function while importing, try the below
<style lang="scss" scope>
#import './assets/scss/styles.scss'
</style>
For example, if my app has two components with this SCSS
A component:
<style lang="scss" scoped>
.example {
color: red;
}
</style>
Another component:
<style lang="scss" scoped>
.another-example{
background: yellow;
}
</style>
Then I would like to have the SCSS from each component nested into one selector, so the resulting CSS will be
#my-app .example {
color: red;
}
#my-app .another-example{
background: yellow;
}
Is it possible to do this without going into every single component and nesting the SCSS inside the #my-app selector in every component?
I'm trying to apply a vue-material style to an active menu option; The following works well:
<style lang="scss" scoped>
#import '~vue-material/dist/theme/engine.scss';
.md-list {
.md-selected,
.router-link-active{
.md-list-item-text {
color: md-get-palette-color(blue, A200)
}
}
}
</style>
I'm trying to get the following to work however, as it will take the selected theme colors into account, but it does not result in any visible change:
<style lang="scss" scoped>
#import '~vue-material/dist/theme/engine.scss';
.md-list {
.md-selected,
.router-link-active{
.md-list-item-text {
#include md-theme-component() {
color: md-theme(primary);
}
}
}
}
</style>
It does not result in any errors, but does not seem to work at all - any idea what I might be doing wrong? Thanks!
How can I style v-html content with scoped css using vue-loader?
Simple example:
component.vue
<template>
<div class="icon" v-html="icon"></icon>
</template>
<script>
export default {
data () {
return {icon: '<svg>...</svg>'}
}
}
</script>
<style scoped>
.icon svg {
fill: red;
}
</style>
generate html
<div data-v-9b8ff292="" class="icon"><svg>...</svg></div>
generate css
.info svg[data-v-9b8ff292] { fill: red; }
As you can see v-html content don't have data-v attribute, but generate css have data-v attribute for svg.
I know this is expected behavior for vue-loader (https://github.com/vuejs/vue-loader/issues/359). And in this issue descendent selectors mentioned. But as you can see I use it in my css and it's not worked.
How can I style v-html content?
I am using vue-loader 15.9.1. The >>> solution did not work for me (no effect) whereas the /deep/method resulted in building errors...
Here is what worked instead:
.foo ::v-deep .bar { color: red; }
As stated in my answer here:
New version of vue-loader (from version 12.2.0) allows you to use "deep scoped" css. You need to use it that way:
<style scoped> now support "deep" selectors that can affect child
components using the >>> combinator:
.foo >>> .bar { color: red; } will be compiled into:
.foo[data-v-xxxxxxx] .bar { color: red; }
More informations on the release page of vue-loader
AS Sarumanatee said if the accepted answer doesn't work try:
.foo /deep/ .bar { color: red; }
Using /deep/ selector with SCSS didn't work for me but then I tried using ::v-deep selector
e.g
::v-deep a {
color: red;
}
See this answer