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!
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>
How to use media query breakpoints in my vuetify application but in scss file?
For example bootstrap enable me to do that in scss file:
#include media-breakpoint-up(sm) {
.custom-class {
display: block;
}
}
what is the equivalent in vuetify? I can't find any documention in vuetify website
You can do it in scss:
#import '~vuetify/src/styles/settings/_variables';
#media #{map-get($display-breakpoints, 'sm-and-down')} {
.custom-class {
display: block;
}
}
... and you're right there is very little docs regarding breakpoints within vuetify
I achieved this by attaching a class name corresponding to the breakpoint, which is available in the $vuetify.breakpoint object. Not a perfect solution, but I only needed to do it for once element in my app. Hope it helps!
Example:
<item :class="($vuetify.breakpoint.smAndDown) ? 'sm' : ''"></item>
...
<style scoped lang="scss">
#item{
right: 130px;
&.sm{
right: 35px;
}
}
</style>
For example, if I have something like this in my component:
<style lang="scss" scoped>
.color-blue {
color: blue;
}
.orange-blue {
#extend .color-blue; // This works!
#extend .bg-orange; // .bg-orange is defined in another css file somewhere. This doens't work
}
</style>
I get an error that says
".orange-blue" failed to #extend ".bg-orange".
The selector ".bg-orange" was not found.
I've read that I can add
#import 'path/to/orange.css'
to my style block, but that doesn't seem to do the trick here. Also, wouldn't that result in the CSS being repeated for every component that imports it?
Import the file with other styles like that
<style lang="scss" scoped>
#import '~styles/mixins';
...
</style>
or use the usual path
#import '../../../styles/mixins';
You can do it the following way:
Create the file containing the class you want to extend:
src/styles/style.scss
.my_class_to_extend {
backgroud-color: aqua;
}
In your vue.config.js file you add the following pointing to your file:
module.exports = {
css: {
loaderOptions: {
sass: {
data: `#import "#/styles/style.scss";`
}
}
}
}
After that you can extend in your vue component without problems:
...
<style lang="scss" scoped>
.my_extended_class {
#extend .my_class_to_extend;
}
Note that to use that you need scss files all along, not css.
In short, you can not extend css class in *.scss file by importing plain *.css file. Scss compiler will throw an error SassError: The target selector was not found.
The easy way is to rename referenced *.css file to *.scss. So outcome would be like #import 'path/to/orange.scss'
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>
I'm searching how to inject a global (THEME_NAME in my example) to all the vue components:
<template>..</template>
<style lang="scss">
#import "bulmaswatch/<%=THEME_NAME=>/bulmaswatch.scss";
.foo {
color: $primary;
}
</style>
Context:
I'm using the darkly theme of bulma css in my vue application (vue Cli 3)
<template>..</template>
<style lang="scss">
#import "bulmaswatch/darkly/bulmaswatch.scss";
.foo {
color: $primary;
}
</style>
In order to switch to the cyborg theme, I will have to replace darkly with cyborg everywhere...
Is there a better way? Something like
<template>..</template>
<style lang="scss">
#import "bulmaswatch/<%=THEME_NAME=>/bulmaswatch.scss";
.foo {
color: $primary;
}
</style>
then somewhere in Webpack or vue.config.js, we can decide what is the theme
configureWebpack: () => {
return {
plugins: [
new webpack.DefinePlugin({
THEME_NAME: "cyborg"
}),
],
}
}
In order to switch to the cyborg theme, I will have to replace darkly with cyborg everywhere...
Not if you use the re-export pattern.
There's no need for any external libraries and codegen magics with webpack.
Basically, you create a file where you import your theme.
Let's call it _my-bulma-theme.scss and let's import darkly for now.
// _my-bulma-theme.scss
#import "bulmaswatch/darkly/bulmaswatch.scss";
In your code, you import this file instead of importing from Bulma directly:
// some-component.vue
<style>
#import "../../my-bulma-theme";
</style>
// some-other-component.vue
<style>
#import "../../my-bulma-theme";
</style>
Now, when you want to change the theme, you just need to change it in one place: the _my-bulma-theme.scss file.
// _my-bulma-theme.scss
#import "bulmaswatch/cyborg/bulmaswatch.scss";