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

相关推荐
一只叫煤球的猫2 分钟前
写代码很6,面试秒变菜鸟?不卖课,面试官视角走心探讨
前端·后端·面试
excel1 小时前
Three.js 材质(Material)详解 —— 区别、原理、场景与示例
前端
掘金安东尼1 小时前
抛弃自定义模态框:原生Dialog的实力
前端·javascript·github
hj5914_前端新手5 小时前
javascript基础- 函数中 this 指向、call、apply、bind
前端·javascript
薛定谔的算法5 小时前
低代码编辑器项目设计与实现:以JSON为核心的数据驱动架构
前端·react.js·前端框架
Hilaku5 小时前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css
yangcode5 小时前
iOS 苹果内购 Storekit 2
前端
LuckySusu5 小时前
【js篇】JavaScript 原型修改 vs 重写:深入理解 constructor的指向问题
前端·javascript
LuckySusu5 小时前
【js篇】如何准确获取对象自身的属性?hasOwnProperty深度解析
前端·javascript
LuckySusu5 小时前
【js篇】深入理解 JavaScript 作用域与作用域链
前端·javascript