vue 3 sass code example

Example 1: vue scss

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

Example 2: vue import css

// To import global CSS, simply import the stylesheet in main.js or App.vue, 
// where it is easy to reference all global styles in one main file 
// (or create a styles-import.js file and import that file in your main.js file).

// main.js
import '~/assets/styles.css';

// To import css scoped to a component, we can't just @import within a scoped style element,
// as they will leak out.
// Instead, we need to dedicate an entire scoped style element to importing that file.

// Component.vue
// Do this:
<style scoped src="~/assets/styles.css"><style> // This will import the CSS scoped to this component only
// Not that:
<style scoped lang="css">
  @import "~/assets/styles.css"; // This will import the CSS globally
</style>

Example 3: 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 4: 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

Example 5: 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>