Vue3中集成sass（sass的使用 ）

一、安装sass

npm i sass 

二、创建src/styles/index.scss

内容如下：

// 引入清楚全局默认样式
@import 'reset.scss'

reset.scss的内容

npm上搜索reset.scss

三、入口文件引入src/styles/index.scss

import '@/styles/index.scss'

重置样式生效，但是无法给项目引入全局变量$

四、在style/variable.scss创建一个variable.scss文件

// 给项目提供的scss全局变量
$mycolor:red;

五、在vite.config.ts文件配置如下:

export default defineConfig({
  plugins: [
    vue(),
  // scss全局变量的一个配置
  css: {
    preprocessorOptions: {
      scss: {
        javascriptEnabled: true,
        additionalData: '@import "./src/styles/variable.scss";',
      },
    },
  },
})

六、可以使用了