vue3+vite使用scss

vue3+vite安装和使用scss详细步骤：

1、安装依赖

npm install sass -d

2、配置vite.config.js

export default defineConfig({
  plugins: [vue()],
  css: {
    preprocessorOptions: {
      scss: {
        // 全局引入 style.scss
        additionalData:'@import "@/style.scss";'
      }
    }
  },
  resolve: {
    // 配置路径别名
    alias: {
      '@': path.resolve(__dirname,'./src')
    },
  }
})

3、在对应目录下创建main.scss

$blue: #3385ff

4、在对应文件引用变量：

<style scoped>
div{
  color: $blue;
}
</style>

搞定！