I'm new to vue 3 and vue UI. I personally think that Vue 3 should add the required SCSS Loader plugin when you select it and create a standard style folder and some default files. I really appreciate your article! It filled in some gaps. I'm not a web developer, until the last year and then only really looking at all the new frameworks like; AngularJS, Angular, React, Preact, etc. I think Vue 3 has a lot going for it over vuejs. However, Seems like the Documentation for vue 3 needs to improve some. What a lot of articles lack are fine details that beginner would need. A lot of students and others moving over to web programming need every detail possible. I think it would be great if this article has some of your sample files contents to show what a basic scss file looks like and the structure inside your files global.scss. Thanks again! Great Job!!
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!
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.
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?
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Nice article :)!
I'm new to vue 3 and vue UI. I personally think that Vue 3 should add the required SCSS Loader plugin when you select it and create a standard style folder and some default files. I really appreciate your article! It filled in some gaps. I'm not a web developer, until the last year and then only really looking at all the new frameworks like; AngularJS, Angular, React, Preact, etc. I think Vue 3 has a lot going for it over vuejs. However, Seems like the Documentation for vue 3 needs to improve some. What a lot of articles lack are fine details that beginner would need. A lot of students and others moving over to web programming need every detail possible. I think it would be great if this article has some of your sample files contents to show what a basic scss file looks like and the structure inside your files global.scss. Thanks again! Great Job!!
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!
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.
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?