Menu
I am using Vueify with Laravel/Elixir. I use Sass inside my Post.vue file but it references colors I declare in @import "resources/assets/sass/bootstrap-variables-override.scss"; Is there a way to not have to include that line inside of every single .vue component I make?
452
Vue CLI install Once installed, create a folder called sass , scss or styles in your src directory with a file named variables. scss or variables. sass . The vuetify-loader will automatically bootstrap your variables into Vue CLI's compilation process, overwriting the framework defaults.
You have SCSS variables in one file that you want to make available to your Vue components. The good news is that the Vue CLI makes it incredibly easy to support writing SCSS, and with Vue's single file components you can simply add lang="scss" to the <style> block ( docs).
Vue CLI projects come with support for PostCSS, CSS Modules and pre-processors including Sass, Less and Stylus.
The basic syntax for defining a variable is simple: Just use a $ before the variable name and treat its definition like a CSS rule: Sass Variable Syntax: $<variable name>:<value>; The following declares a variable named large-font.
There's a discussion on the official vue-loader repo with the exact same question and it boils down to: no, you have to import the variables file in each .vue component that needs it.
One thing you can do to simplify the situation slightly is to add the folder with the variables file to your include paths, so you can just do @import "my-variables.scss"; instead of specifying the entire path every time.
67
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
