add sass to vue cli project code example

Example 1: setup scss in vue

npm i node-sass sass-loader

// create the path: styles/main.scss in your src directory
–src
  |––styles
  |––main.scss

// add this to your vue.config.js file in the root directory
module.exports = {
  css: {
    loaderOptions: {
      sass: {
        prependData: `@import "@/styles/_variables.scss";`
      }
    }
  }
};

Example 2: vue js sass

# /!\ if you work with vue@2.6.12, it seems sass-loader@11.0.0 doesn't work
# So, in terminal:
yarn add node-sass sass-loader@10.1.1

Tags:

Css Example

Related