How to use Sass in vite project

1. Installation

npm add sass

Note: Some blogs will tell you that you need to install itsass-loaderandsass, this is what is done in webpack projects. In the Vite environment, if you want to use a Sass preprocessor, you don't actually need to install it separatelysass-loader. Vite integrates support for Sass by default, you only need to install Sass itself.

2. Configuration

In many blogs, you will be told toThis configuration is performed in:

export default defineConfig({
  //...
  css: {
    // css preprocessor    preprocessorOptions: {
      scss: {
        //Introduce this way you can use predefined variables in the global        // Add ;        additionalData: '@import "@/assets/style/";'
      }
    }
  }
})

The purpose of doing this is to introduce styles globally (this partadditionalData: '@import "@/assets/style/";')

It is actually equivalent toWrite the following code:

import { createApp } from 'vue'
import App from './'
import "@/assets/style/"
createApp(App).mount('#app')

3. Use

For detailed usage methods, please refer to:Sass: Sass Basics

References

1. Configuring SCSS global variables and possible pitfalls in Vite
2. Install scss in vite initialized project and use scss
3. Vite + Vue3 project add sass

This is the end of this article about how to use Sass in the vite project. For more related content on using Sass, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!