how to use scss in vue code example

Example 1: vue scss

npm install sass-loader node-sass style-loader --save-dev

Example 2: 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 3: vue.js use scss in balise style

// in terminal
// If you use npm
npm install sass-loader node-sass --save-dev
// If you use yarn 
yarn add sass-loader node-sass

// In your component
<style lang="scss">
  // ...
</style>

Example 4: vue add sass

<!--
# Run this command in the root dir of your vue project:
npm i sass-loader node-sass style-loader
-->

<!-- And later in your vue component -->
<style lang="sass">
/* Your sass code */
</style>

Example 5: vue sass loader

<style lang="scss">
/* write SCSS here */
</style>