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

相关推荐
小磊哥er6 分钟前
【前端工程化】前端开发中的这些设计规范你知道吗
前端
江城开朗的豌豆6 分钟前
路由守卫:你的Vue路由‘保安’,全局把关还是局部盯梢?
前端·javascript·vue.js
Jinxiansen021114 分钟前
Vue 3 响应式核心源码详解(基于 @vue/reactivity)
前端·javascript·vue.js
OEC小胖胖5 小时前
去中心化身份:2025年Web3身份验证系统开发实践
前端·web3·去中心化·区块链
vvilkim6 小时前
Electron 进程间通信(IPC)深度优化指南
前端·javascript·electron
ai小鬼头8 小时前
百度秒搭发布:无代码编程如何让普通人轻松打造AI应用?
前端·后端·github
漂流瓶jz8 小时前
清除浮动/避开margin折叠:前端CSS中BFC的特点与限制
前端·css·面试
前端 贾公子8 小时前
在移动端使用 Tailwind CSS (uniapp)
前端·uni-app
散步去海边8 小时前
Cursor 进阶使用教程
前端·ai编程·cursor
清幽竹客8 小时前
vue-30(理解 Nuxt.js 目录结构)
前端·javascript·vue.js