DEV Community


Discussion on: My SCSS setup within a Vue CLI 3 project

lynnewritescode profile image
Lynne Finnigan Author

Thanks! I never really thought about the official docs before but I guess it is lacking in terms of how to structure/set up styles. I might look into contributing to the docs :) I'm glad it helped you!

jerrymerchand profile image
Jerry-Merchand • Edited

Hey Lynne, really nice job and quick response! I was tasked with creating a vue app for mobile like two weeks ago. So learning at a high rate of speed. :)

I'm really lacking in knowledge of css and scss. I have added bootstrap to my vue app. And now thanks to your article, I know i need to add my bootstrap scss files to the global.scss file as imports. However, it's blank right now.

One thing I'm trying to wrap my head around is css is cascading the css rules down but we are thing to sandbox them into each component (vue). And in the end we will combine them all into one file for deployment.

Does my assumption seem right about importing the scss file into the global.scss file? The bootstrap scss files are located under the node_modules folder in subfolders.

Thread Thread
lynnewritescode profile image
Lynne Finnigan Author • Edited

The way I use it, and think about it, is that anything in the global scss file applies across the whole site and this is generally things like variables, grid, layout, and basic styles. It should be styles that aren't very specific, sort of like your baseline.

For each component, when you write a scss file for it and the styles are nested inside the component class name, it shouldn't affect anything else other than that one component. This is what makes it modular.

In your component scss file, you might want to overwrite something that has been set in the global stylesheet, and that's completely fine. As long as it is nested inside your component class name then it should only affect that one component.

Does that make sense?