Setup Vue CLI 3

When creating a new project with vue create my-vue-project, pick Manually select features and check CSS Pre-processors.

If you already have created your project without the previous steps, manually install sass-loader:

npm install -D sass-loader node-sass

You will probably want, to import your SCSS functions, mixins and variables into your components as well. Add style-resources-loader to your project.

npm i style-resources-loader -D

SCSS project structure

In most of my projects, I use the atomic design methodology from Brad Frost. My SCSS project structure follow this structure:

my-vue-project/src/:
| \---styles
|     +---atoms
|     |   +---forms
|     |   +---modifiers
|     |   \---typography
|     +---functions // 🚩 Shared with vue components
|     +---layouts
|     +---mixins // 🚩 Shared with vue components
|     +---molecules
|     +---organisms
|     +---settings // 🚩 Shared with vue components
|     +---templates
|     +---variables // 🚩 Shared with vue components
|     \---vendors
|         +---a11y
|         \---normalize

All your SCSS get imported into global.scss.

Make variables functions and mixins accessible to component

If you don’t already have a vue.config.js file at the root of your project, create it.

Add your shared SCSS files to this one so your components can use variables, mixins, functions etc.

const path = require("path");

module.exports = {
  chainWebpack: config => {
    const types = ["vue-modules", "vue", "normal-modules", "normal"];
    types.forEach(type =>
      addStyleResource(config.module.rule("scss").oneOf(type))
    );
  }
};

function addStyleResource(rule) {
  rule
    .use("style-resource")
    .loader("style-resources-loader")
    .options({
      patterns: [
        path.resolve(__dirname, "./src/styles/settings/*.scss"),
        path.resolve(__dirname, "./src/styles/functions/*.scss"),
        path.resolve(__dirname, "./src/styles/mixins/*.scss"),
        path.resolve(__dirname, "./src/styles/variables/*.scss")
      ]
    });
}

Add your global.scss style to your app

in main.js we want to have our global.scss, to do so add:

import "./styles/global.scss";