使用 Vite 开发项目，配套周边生态使用起来，开发效率会很高。但也会有一些问题需要解决。
当我们使用 scss 时，希望能够把一些定义变量，定义mixin 的文件全局加载，避免每处用到还要单独引入这些文件。
这就需要一些配置解决。
在 Vite 项目中添加全局 SCSS 文件可以通过以下步骤实现:
- 安装 SASS 依赖:
npm install -D sass
- 创建全局 SCSS 文件:
在 src 目录下创建一个 styles 文件夹，并添加你的全局 SCSS 文件，例如 variables.scss, mixins.scss.
- 配置 vite.config.ts:
在 vite.config.ts 文件中添加以下配置:
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'@': path.resolve(__dirname, './src')
}
},
css: {
preprocessorOptions: {
scss: {
additionalData: '@import "@/styles/variables.scss";',
javascriptEnabled: true
}
}
}
})
这个配置会自动将 variables.scss 文件引入到所有的 SCSS 文件中。
- 使用全局变量:
现在你可以在任何组件的 SCSS 中使用定义好的全局变量了.
对于普通的 SCSS 样式文件（非变量或 mixin），你可以在 main.ts 文件中直接导入:
import { createApp } from 'vue'
import App from '@/App.vue'
import '@/styles/global.scss'
const app = createApp(App)
app.mount('#app')
注意，对于 mixin 文件，需要在 vite.config.ts 中进行配置，而不是在 main.ts 中直接导入.
通过这些步骤，你就可以在 Vite 项目中成功添加并使用全局 SCSS 文件了。这种方法可以让你在整个项目中共享 SCSS 变量、mixins 和其他全局样式，提高代码的复用性和维护性。
