Vue3中怎么安装scss？

第一步用npm下载sass

npm install sass --save-dev

第二步编辑vite.config.js，实现全局引用

在resolve中添加如下代码：

css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "@/assets/main.scss";` // 注意这个是路径
      }
    }

第三步测试scss是否生效

编写main.scss:

$primary-color: #3498db;

div{
  width: 50px;
  height: 50px;
  background-color: red;
}

编写test.vue:

<script setup>

</script>

<template>
  <p>我是测试</p>
  <div></div>
</template>

<style lang="scss" scoped>
  p{
    color: $primary-color;
  }
</style>

在控制台输入npm run dev查看效果：

完美显示！

局部引用和这个方法差不多，就不演示了。