vue3配置scss

在Vue3中配置SCSS的方法如下：

安装相关依赖

npm install node-sass sass-loader --save-dev

在vue.config.js中配置SCSS

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        prependData: `@import "@/assets/scss/_variables.scss";`
      }
    }
  }
}

其中，prependData是用来引入全局的SCSS变量和混合等。如果需要引入多个文件，可以使用数组，例如：

prependData: [
  `@import "@/assets/scss/_variables.scss";`,
  `@import "@/assets/scss/_mixins.scss";`
]

在组件中使用SCSS

在.vue文件中，可以直接使用SCSS语法，例如：

<style lang="scss">
  .container {
    background-color: $primary-color;
    .title {
      font-size: 20px;
      color: lighten($primary-color, 10%);
    }
  }
</style>

这样就可以在Vue3中使用SCSS了。