Using sass variables in VueJS component

Question

I have a pretty simple problem with a VueJS component that should use a variable. The problem is getting sass to register variables inside the component.

I tried to import the _variables.scss file containing my variables, but no luck. At this point, any guidance is much appreciated, or if there is another way to inherit the legacy component.

Mycompponent.vue

 <template> <div class="my-color"></div> </template> <style lang="sass"> .my-color { color: $primary-color; } </style> <script> export default{ data(){ return {} } } </script> 

Gulpfile.js

 var elixir = require('laravel-elixir'); require('laravel-elixir-vueify'); elixir(function(mix) { mix.browserify('main.js'); mix.sass('app.scss'); }); 

app.scss

 @import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap"; @import "modules/variables"; 

variables.scss

 $primary-color: #BA2731; //Red 

Answer 1

Importing _variables.scss in each component seems to be the only solution I have found so far ( it should work, according to this problem ).

 <template> <div class="my-color"></div> </template> <style lang="sass"> @import 'path/to/your/_variable.scss'; // Using this should get you the variables .my-color { color: $primary-color; } </style> <script> export default{ data(){ return {} } } </script> 

Since you include only variables, this should not be a problem.

But, as mentioned in this question, a caution: you should include only abstract objects (variables, extends, mixins) in each component, and not specific CSS rules.

Answer 2

In my project, I used the Vue CLI web package and here is a solution that worked for me.

I manage all my SCSS in the App.vue file. In each of Component.vue I settled on using <style></style> and started creating a separate component.scss .

---

So my src folder looks like this:

  /src /assets /components /compA CompA.vue compA.scss /compB CompB.vue compB.scss App.vue main.js 

---

And my App.vue looks like

 <template> ... </template> <script> ... </script> <style lang="less"> //Bootstrap @import "../node_modules/bootstrap-sass/assets/stylesheets/bootstrap"; //Components @import "components/compA.scss"; @import "components/compB.scss"; </style> 

---

The advantage of this setting is to manage all your styles in one place, as well as being able to use all your boot variables and mixins.

I have followed this route since I imported Boostrap SCSS into all my components, the size of my application continued to grow. The increase is not significant if I import only the variables, but when I import the entire SCSS Boostrap, the increase becomes significant. I do this, so I can use mixins and extend some existing styles.

Answer 3

If you are using vue-cli , try this.

If you have not already installed the sass bootloader:

 npm install -D sass-loader node-sass 

Then in vue.config.js :

 const path = require('path'); module.exports = { css: { loaderOptions: { sass: { data: '@import "@/pathto/variables.scss";' } } } }; 

In your component:

 <style lang="sass"> .my-color { color: $primary-color; } </style> 

A source:

Passing parameters to preprocessor loaders

How to import a sass file into each vue component