vue引入全局scss

### 在 Vue 3 中配置和使用 SCSS 在 Vue 3 项目中引入和使用 SCSS，可以通过以下方式实现。以下是详细的配置方法和使用指南。 #### 1. 安装相关依赖 首先需要安装 SCSS 的相关依赖，可以通过 npm 或 yarn 来完成安装。运行以下命令以安装 `sass`： ```bash npm install sass --save-dev ``` 这一步确保了项目可以编译 SCSS 文件[^1]。 #### 2. 配置 Vite 对 SCSS 的支持 对于基于 Vite 的 Vue 3 项目，Vite 已经内置了对 SCSS 的支持，通常不需要额外的配置。如果需要自定义配置（例如全局变量或混入），可以在 `vite.config.ts` 文件中进行如下配置： ```typescript // vite.config.ts import { defineConfig } from 'vite'; import vue from '@vitejs/plugin-vue'; export default defineConfig({ plugins: [vue()], css: { preprocessorOptions: { scss: { additionalData: `@import "@/styles/variables.scss";` // 引入全局变量文件 } } } }); ``` 上述代码中，`additionalData` 属性允许你在每个 SCSS 文件中自动注入一段代码，例如导入全局变量文件[^1]。 #### 3. 使用 SCSS 编写样式 在组件中使用 SCSS 时，需要在 `<style>` 标签中添加 `lang="scss"` 属性。例如： ```html <template> <div class="example">这是一个示例</div> </template> <style lang="scss"> .example { color: red; // 使用 SCSS 语法编写样式 } </style> ``` 这样就可以在组件中直接使用 SCSS 语法[^1]。 #### 4. 配置 SCSS 全局共享变量 为了在整个项目中共享 SCSS 变量或混入，可以在 `src/styles` 目录下创建相关的 SCSS 文件，例如 `variables.scss` 和 `mixins.scss`。然后通过 Vite 的配置文件将这些文件设置为全局导入。 例如，在 `src/styles/variables.scss` 中定义变量： ```scss $primary-color: #42b983; $font-size-base: 16px; ``` 在 `vite.config.ts` 中已经配置了全局导入，因此所有组件都可以直接使用这些变量而无需单独引入[^2]。 #### 5. 引入单独的 SCSS 文件 如果需要在某个组件中引入单独的 SCSS 文件，可以直接使用 `@use` 或 `@import` 指令。例如： ```html <style scoped lang="scss"> @use '../../assets/style/index.scss' as base; .login-wrap { width: 100%; height: 100%; display: flex; font-size: base.$font-size-base; color: $primary-color; @include button-style; // 使用的是全局的 SCSS 混入 } </style> ``` 这里使用了 `@use` 指令来引入单独的 SCSS 文件，并通过命名空间访问其中的变量和混入[^2]。 #### 6. Vue CLI 项目的 SCSS 配置（可选） 如果使用的是 Vue CLI 构建工具，则需要在 `vue.config.js` 中进行类似的配置： ```javascript module.exports = { css: { loaderOptions: { sass: { prependData: ` @import "./src/styles/variables.scss"; @import "./src/styles/resets.scss"; ` } } } }; ``` 这种配置方式与 Vite 不同，但功能相似，都是为了实现全局变量和混入的导入[^4]。 --- ###