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

相关推荐
熊出没12 分钟前
Vue前端导出页面为PDF文件
前端·vue.js·pdf
VOLUN12 分钟前
Vue3项目中优雅封装API基础接口:getBaseApi设计解析
前端·vue.js·api
用户990450177800926 分钟前
告别广告干扰,体验极简 JSON 格式化——这款工具让你专注代码本身
前端
前端极客探险家29 分钟前
告别卡顿与慢响应!现代 Web 应用性能优化:从前端渲染到后端算法的全面提速指南
前端·算法·性能优化
袁煦丞1 小时前
【局域网秒传神器】LocalSend:cpolar内网穿透实验室第418个成功挑战
前端·程序员·远程工作
江城开朗的豌豆1 小时前
Vuex数据突然消失?六招教你轻松找回来!
前端·javascript·vue.js
好奇心笔记1 小时前
ai写代码随机拉大的,所以我准备给AI出一个设计规范
前端·javascript
江城开朗的豌豆1 小时前
Vue状态管理进阶:数据到底是怎么"跑"的?
前端·javascript·vue.js
用户21411832636021 小时前
dify案例分享-Dify v1.6.0 重磅升级:双向 MCP 协议引爆 AI 生态互联革命
前端
程序员海军1 小时前
AI领域又新增协议: AG-UI
前端·openai·agent