My SCSS setup within a Vue CLI 3 project

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. I've played with it on and off for a little while, and now I'm working on building my own website from scratch again using Vue.

One of the hardest things to get my head around was the project structure. It's something not very many tutorials cover. Eventually I pieced it together, and came across my next problem. SCSS.

I couldn't find a lot of information on how people usually handle their use of global styles, and also styles within each component. I had an idea of how I wanted to do it, but no idea how to actually achieve it. If you're in a similar situation, I hope this article helps in some way.

So here's how I create a Vue CLI 3 app from scratch...

Creating the app

Assuming you have Vue CLI 3 installed, run the following command in the terminal to launch the Vue Project Manager in your browser.

vue ui

If you don't have it installed yet, here is the documentation you need.

To create an app, simply click the create button at the top of the screen in the Vue Project Manager. This will then take you through various steps which you would normally have to do in the terminal, and allow you to save your settings as a preset. Handy!

For my projects I tend to choose the following options:

• Package manager: Yarn
• Preset: Manual (for the first project)
• Features: Babel, Router, CSS Pre-processors, Linter/Formatter
• History mode: on
• Pre-processor: SCSS/SASS
• Linter/Formatter: ESLint + Prettier (Lint on save)

Then click Create Project and it will create your app. You should now have a basic Vue.js project. You can run this by going to the tasks tab in the Vue Project Manager and clicking on serve to launch your site locally.

Setting up our styles

First of all, create a folder within the src folder named styles. This is where we will store all of our SCSS for the app. In this folder, create a file that will be used for your global styles e.g. global.scss

In the Vue Project Manager, go to the Plugins tab and click on the Add plugin button. We want to install a plugin called vue-cli-plugin-style-resources-loader.

Once this has installed, it will add a file to the root of your project called vue.config.js

Go to vue.config.js and add the following code, replacing the stylesheet name/path with whatever you have named your scss file for your global styles.

const path = require("path");

module.exports = {
  pluginOptions: {
    "style-resources-loader": {
      preProcessor: "scss",
      patterns: [path.resolve(__dirname, "./src/styles/global.scss")]
    }
  }
};

Now, all of the styles from global.scss will be available across the project and within components. Normally my SCSS file structure looks something like this to begin with:

I have basic rich text styles within _base.scss, and variables, typography, etc are all stored in their respective folders as partials. These are then imported into the global stylesheet like this:

@import "setup/normalize.scss";
@import "setup/typography.scss";
@import "setup/variables.scss";
@import "setup/mixins.scss";

@import "basics/base.scss";
@import "basics/layout.scss";
@import "basics/links.scss";
@import "basics/buttons.scss";

I also have a folder within the styles directory for components. Each component I create in Vue will have it's own scss partial. A useful feature of Vue.js is that you can add styles within the Vue component file, and these can be scoped so that they will only render if that specific component is rendered on the page.

Now that we're all set up, adding styles to a component is easy. Here is how it would look in my component Example.vue

<template>
  <div>
    <h1>I am a component!</h1>
  </div>
</template>

<script>
export default {
  name: Example
}
</script>

<style lang="scss" scoped>
@import "../styles/components/example.scss";
</style>

Inside the _example.scss file you would have access to all the variables/typography/mixins and anything else you have added in your global styles. You could also write it out inside the style tag like this, with $c-title being our global variable name for the title colour:

<style lang="scss" scoped>
h1 {
  color: $c-title;
}
</style>

However, I prefer to keep all of the styles in one place overall (the styles folder & sub folders), with the file names named the same as the component itself. This makes it easier to find and for other people to work with.

This has been a long(ish) article, so if you've made it this far, thanks for reading! I hope this helps in some way. Have fun with your Vue projects and create something awesome!