vue3中scss使用

在 Vue 3 中，使用 SCSS 需要先安装 `sass-loader` 和 `sass` 依赖，可以使用以下命令进行安装：

npm install -D sass-loader sass

安装完成后，在 Vue 组件中的 `<style>` 标签中，将 `lang` 属性设置为 `scss`，即可开始编写 SCSS 样式。

示例：

<template>
  <div class="my-component">
    <p>这是一个 Vue 组件</p>
  </div>
</template>

<script>
export default {
  name: 'MyComponent'
}
</script>

<style lang="scss">
$primary-color: #00bcd4;

.my-component {
  p {
    color: $primary-color;
  }
}
</style>

在上面的示例中，首先在 `style` 标签中设置了 `lang="scss"`，然后定义了一个 SCSS 变量 `$primary-color`，并在样式中使用了该变量。

需要注意的是，在使用 SCSS 时，必须使用 `{}` 包含样式规则，不能使用 `;` 分隔样式规则，否则会编译失败。

最后，使用 Webpack 打包构建项目时，需要在 `vue.config.js` 中配置 `sass-loader`，示例配置如下：

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

在上面的示例中，首先在 `css` 属性中配置 `loaderOptions`，然后在 `sass` 属性中配置了 SCSS 变量的文件路径，这样在编译 SCSS 样式时，就可以使用该文件中定义的变量。