Vue3+Vite项目中安装SCSS

一、安装SCSS

在创建好Vue项目后，在项目路径中打开命令行输入以下命令：

npm i sass sass-loader --save-dev

二、配置SCSS全局共享变量

scss中我们可以自定义变量，一些变量往往是全局共享的，为了方便我们可以在vite.config.js中defineConfig里面添加配置如下：

(需要自己新建一个存放共享的变量的文件如：mixin.scss)
在项目的src/assets文件夹下新建style/mixin.scss文件

在vite.config.js文件中配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { fileURLToPath, URL } from 'node:url'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
      alias: {
        '@': fileURLToPath(new URL('./src', import.meta.url))
      }
    },

  css: {
      // css预处理器
      preprocessorOptions: {
        scss: {
          // 引入 mixin.scss 这样就可以在全局中使用 mixin.scss中预定义的变量了
          // 给导入的路径最后加上 ; 
          additionalData: '@import "@/assets/style/mixin.scss";'
        }
      }
    }
})

红框中的是需要注意的点 配置好vite.config.js文件需 重启项目

在项目中使用scss