My SCSS setup within a Vue CLI 3 project

Lynne Finnigan on September 08, 2018

I never realised that I had lost some of my passion for development until Vue.js came along. I'm still learning, but it has made coding fun again... [Read Full]
markdown guide
 

Nice article :), however I was wondering if it could generate again and again all the styles called in global.scss each time a component has a <style scoped>. For exemple, the normalize.scss would be appended multiple time in the final file.

At least it seems to be the case when I replicate the exemple.

Here the compiled result:

/*! normalize.css v7.0.0 | MIT License html{line-height:1.15; [...]
/*! normalize.css v7.0.0 | MIT License html[data-v-abd815be]{line-height:1.15; [...]
/*! normalize.css v7.0.0 | MIT License html[data-v-jh6khva]{line-height:1.15; [...]

Or maybe this architecture should only be used with variables, mixins, functions ?

 

Hey Allan, great question!

My thinking around this was that inside the global.scss, it would only really import variables and mixins / placeholders - basically anything that the scoped components might need to reference or need access to.

You could probably also just list those files in the config, instead of creating a global.scss file - I just preferred it that way.

You bring up a good point, I think a good way of tackling this would be to have just variables and things that your components need to reference in the vue config file, and then any other 'global' styles such as basic html / body / normalize files could be imported into your layout / wrapper vue file.

What do you think?

 

Yes, I ended up with this solution so far :).

I created an import.scss for all my variables and mixins / placeholders used with the style-resources-loader plugin, and imported the global css part with a simple import in my main.js file.

I think it give the best of both worlds if you want to write style scoped and also use some general (unscoped) style like a reset, normalize, general UI, etc.

Great! Yeah that is always the case for me, I always have sort of base styles that apply globally, but I want to scope all my components. So doing it this way works perfectly :)

 

"I never realised that I had lost some of my passion for development until Vue.js came along. I'm still learning, but it has made coding fun again for me."
Same here I think, I'm gonna read this properly tomorrow - as I wanted to do this also. Are you me?

 

Haha thanks! Well, I’ve never seen us both in the same room, so maybe I am you 😄

 

wowww, amazing, I was precisely looking for this, to use variables and mixins inside my scoped style, I'm testing using atomic design with VueJS, and this import of variables is a must have part of the solution, thank you very much \o/

 
 

Really good article, I followed a similar pattern on a React project recently, the only difference is I used SCSS nesting to handle the encapsulation. I've been intrigued by the import style so thanks for the reminder/motivation to have a look.

 
 

Like the article, but quick question. I am trying to create a Vue Component Library, where all of the components have a default scss variable in them, for example:

$color: #000 !default

The intention is that the component will have default styling that could easily be configured/overridden when I later install my component library but override the styles in a configurable variables scss file. I can't seem to figure out on how to have the vue library's config file to accept that scss file.

Any insights?

 

Hi Mark, do you have a code example of the config file and where you're trying to add the scss?

I'd imagine that you could probably override based on the order you're importing the scss files into the component, but I'm not sure I understand what you're looking to do.

 

I totally get how one could lose their passion for develop. I've been at it for decades and sometimes it gets old. You've inspired me give Vue a shot and I'm excited about getting started this weekend. Thanks!

BTW, I love that you wrote this article in Markdown.

 

Thanks Karl 😊

That’s great! Glad you’re going to give Vue a try, I’ve really enjoyed working with it so far. Let us know how you find it!

 

Why import example.scss again in components when using global import already. I like to import all my general styles in vue.conf.js, then it is available inside every component without importing anything.

 

The idea is that your global styles are only variables and things you need access to globally. When you import example.scss it has the attribute ‘scoped’, which means it’ll only render if that component is rendered on the page. Saves you loading a larger css file with css that isn’t being used. Hope this helps!

 

Just wanted to say a big thank-you! I was struggling a lot with this problem recently, and this article showed up on Google search. And it was the simplest, best explanation for the setup that I came across. 🤗

 

Thanks, I'm really glad this helped you! 😊

 

Life saver,
actually this article it is better than every tutorial i watched in the same topic,
I have always been confused about setting up a style architecture for my vue projects.
good job

 

Thank you so much! I'm glad it has helped :)

 

Great article, and I feel like you should get bonus points for the META cover_image.

 

Haha I wondered if anyone would notice! 😂

 

Nice read, I like how there are so many people reigniting there passion for programming with Vue. Ultimately it's this passion that will help Vue end up on top. ♥️ Vue

 

Thanks! I completely agree, many people have said this to me as well. Very nice to work with, great documentation and community.

 

I have in a project a huge components base. Some have their style tag in scss, and others in sass.

When I put scss in 'preProcessor', it works for scss styles but not sass ones. If I put sass, the same, it does not works foe scss components.

Is there a way to import my variables file in both componetns ?

 

Off the top of my head, it could be the import syntax. I think in scss it looks like this:

<style scoped lang="scss">
    @import 'styles.scss'
</style>

and in sass like this (without the quotes):

<style scoped lang="sass">
    @import styles.scss
</style>
 

Hi - a newbie question here - if anyone can please fill me in:

Following your guide I have successfully added vue-cli-plugin-scss-base (0.1.10) to my vue project.
And when using the "vue ui" (Vue Project Manager in your browser) approach - the scss folder with all the scss files get generated (as well as changes to vue.config.js and App.vue).

I suppose this happens just about the time the terminal which I engage "vue ui" from reports:
"🚀 Invoking generator for vue-cli-plugin-scss-base...
✔ Successfully invoked generator for plugin: vue-cli-plugin-scss-base
The following files have been updated / added:" (and the list of files: src/scss/animations/_animations.scss etc.......)

Now the question is: How would I go about doing this from the terminal??

I mean: "npm i vue-cli-plugin-scss-base" adds the statements to package.json and package.lock.json (in dependencies)

And "npm i vue-cli-plugin-scss-base --save-dev" adds to devDependencies (same as vue ui - from browser) when I add the plugin there..

but after that npm install / npm build / (rebuilding entire project in IntelliJ) or whatever I tried - it doesn't seem to have any effect. The scss file creation and file changes (mentioned above) never appear/happens.

Surely there is some essential command (knowledge) I am completely missing.

NEVER mind - the solution was as simple as: "vue add vue-cli-plugin-scss-base"

best regards,
H

 

Hi, I was just about to look into this, did you get it all sorted then?

 

Well done ! Your article works perfectly even in France ! :) Next step for me, import a CSS+SASS grid micro-framework like KNACSS

Thanks Lynne !

 
 

Really good article. I've been struggling with this for a couple of days and finally made it work, thanks!

 

No problem, I'm glad it helped 😊 I was in the same situation, and it took a while to figure out!

 
 
code of conduct - report abuse