Vite 中怎么添加全局 scss 文件

程序员白彬2024-07-09 19:43

使用 Vite 开发项目，配套周边生态使用起来，开发效率会很高。但也会有一些问题需要解决。

当我们使用 scss 时，希望能够把一些定义变量，定义mixin 的文件全局加载，避免每处用到还要单独引入这些文件。

这就需要一些配置解决。

在 Vite 项目中添加全局 SCSS 文件可以通过以下步骤实现:

安装 SASS 依赖:

bash 复制代码

npm install -D sass

创建全局 SCSS 文件:

在 src 目录下创建一个 styles 文件夹，并添加你的全局 SCSS 文件，例如 variables.scss, mixins.scss.

配置 vite.config.ts:

在 vite.config.ts 文件中添加以下配置:

typescript 复制代码

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 文件中直接导入:

typescript 复制代码

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 和其他全局样式，提高代码的复用性和维护性。