Vite 中怎么添加全局 scss 文件

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

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

这就需要一些配置解决。

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

  1. 安装 SASS 依赖:
bash 复制代码
npm install -D sass
  1. 创建全局 SCSS 文件:

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

  1. 配置 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 文件中。

  1. 使用全局变量:

现在你可以在任何组件的 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 和其他全局样式,提高代码的复用性和维护性。

相关推荐
张迅之13 分钟前
【React】Ant Design 5.x 实现tabs圆角及反圆角效果
前端·react.js·ant-design
蔗理苦1 小时前
2025-09-05 CSS3——盒子模型
前端·css·css3
二川bro2 小时前
第25节:VR基础与WebXR API入门
前端·3d·vr·threejs
上单带刀不带妹2 小时前
Node.js 的模块化规范是什么?CommonJS 和 ES6 模块有什么区别?
前端·node.js·es6·模块化
缘如风2 小时前
easyui 获取自定义的属性
前端·javascript·easyui
诗书画唱2 小时前
【前端教程】JavaScript 实现图片鼠标悬停切换效果与==和=的区别
开发语言·前端·javascript
光影少年2 小时前
前端上传切片优化以及实现
前端·javascript·掘金·金石计划
喜葵3 小时前
前端安全防护深度实践:从XSS到供应链攻击的全面防御
前端·安全·xss
_r0bin_3 小时前
分片上传-
前端·javascript·状态模式
东北南西3 小时前
手写React状态hook
前端·javascript·react.js