Skip to content

re: My SCSS setup within a Vue CLI 3 project VIEW POST


Dammit, this is what I have been searching for. Thank you so much for writing this.

Question: Can you give a brief description of each of the folders in the style directory?
Also, you mentioned that the example.scss file would have access to other files like typography, etc but you didn't show how? I want to assume it happens by default?


Thanks :)

The folders in the style directory are just the way I normally organise things and they are fairly self-explanatory from the names. The Views folder contains partials for styles relating to views. Basics contains things like basic rich text styles, links, buttons, etc. Setup is things like variables mixins, and functions. And components would be the styles for each component.

The point of the article is that you need to use the plugin in order to make things like the variables available in other scss files. So if you had a global.scss file setup in the config using the plugin, inside global.scss you would import any scss partials you need to be available across the whole site/app.

Then in the example component I created, example.scss would just have your styles for that component, but the point is that you can use variables within it because they are served globally.


Okay, what about access to other styles like the button or typography. Sorry, but I'm a little bit confused. since the way you are explaining it, you are only making reference to the variable styles.

code of conduct - report abuse