Vue3 vite 集成 sass

一、安装依赖

npm install  sass-embedded

二、配置全局变量

1、新建文件

src/styles/variables.scss

2、配置Vite

修改 vite.config.js

  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "@/styles/variables" as *;`,
      },
    },
  },

3、测试使用

a、在variables.scss文件中创建全局变量

// 全局变量
// 颜色变量
$primary-color: #42b983;
$base-color: red;

注意：sass定义和使用全局变量使用 $

 b、使用

<style lang="scss" scoped>
.test{
  h2{
    color: $primary-color;
  }
}

</style>

 三、引入其它css rest.css

1、新建 src/styles/reset.scss

2、在npm搜索 reset.scss，并复制

3、新建 src/styles/index.scss

4、在index.scss引入rest.scss

@use './reset.scss';

5、在main.ts 引入 index.scss

import '@/styles/index.scss'