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:

| \---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) {
      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'