vue3 scss使用三目

在Vue3中使用SCSS可以通过以下步骤进行配置和使用：

1. 在项目的配置文件中，比如`vite.config.js`中，添加SCSS的配置。可以使用`preprocessorOptions`来指定SCSS的预处理器选项，其中`additionalData`可以用来引入全局的SCSS文件。例如：

export default defineConfig({
  // ...
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "@/styles/global.scss";`
      }
    }
  }
})

这样就可以在任何组件中使用全局的SCSS变量和样式了。

2. 在需要使用SCSS的组件中，可以直接在`<style>`标签中使用SCSS语法。例如：

<style lang="scss" scoped>
.cmp-login {
  border: 1px solid $red; // 这里的$red是全局引入的SCSS中定义的变量
}
</style>

这样就可以在组件中使用定义好的SCSS样式了。

需要注意的是，为了使SCSS正常工作，需要确保项目中已经安装了相关的依赖，比如`sass`、`sass-loader`和`sass-resources-loader`。可以在项目的`package.json`文件中查看是否已经安装了这些依赖，并且版本号符合要求。
#### 引用[.reference_title]
- *1* *3* [vue3.0 使用scss全局变量](https://blog.csdn.net/xiaobai_20190815/article/details/127449735)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* [Vue3中引入scss](https://blog.csdn.net/weixin_43799811/article/details/128257299)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]