vite配置scss全局变量

vite配置scss全局变量

创建单独文件variable.scss在其中定义变量

vite.config.ts中配置

javascript 复制代码
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

// https://vite.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: '@use "@/styles/variable.scss";'
      }
    }
  }
})

任何scss地方使用变量

javascript 复制代码
p {
  color: variable.$color;
}

可能遇到的问题

Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0

sass在3.0.0移除了@import改为@use,因此会有这个提示,所以配置时推荐使用@use

弃用的原因在于 @import 规则存在一些问题,比如会把所有变量、混入(mixins)和函数都导入到全局作用域,容易造成命名冲突,@use 规则能更好地控制作用域,避免这类问题

他们在使用时是有区别的

@import 对应使用变量

javascript 复制代码
p { color: $color}

@use 对应使用变量

css 复制代码
p {
  color: variable.$color; // 文件名.变量名
}

Can't find stylesheet to import.

配置时,发现路径是对的,但是一直报错,如下

在使用相对路径的时候,vite可能无法解析,因为在sass的加载器在处理相对路径时,会根据当前文件的位置查找,而additionalData是全局注入的内容,没有明确的上下文依赖关系,因此相对路径对报错

修改为@/styles/variable.scss就可以完美解决了

Module loop: this module is already being loaded.

重复引入module报错,一般情况,如果我们在main.ts已经引入过一次scss文件,在继续在vite.config.ts中引入,报错的

修改方案: 只在一个地方引入

通常scss变量的的文件都是单独建立一个文件,不会和index.scss混在一起

index.scss通常是在main.js中引入

而variable.scss通常是在vite.config.js中配置,他们的区别是什么呢

main.js与vite.config.js 引入scss的区别

main.ts全局引入,是让整个项目都加载使用了scss文件的样式,每个scss文件的yi'ji保持了自己独立的作用域,不同文件直接的变量是不能相互使用的,这也是为什么要在vite.config.js中配置

vite.config.js的additionalData引入a文件,会保证在每个scss文件编译之前执行先编译一次a文件,保证了每次scss文件注入时,a文件变量已经都存在了,这样保证了变量可以全局使用

相关推荐
coding随想1 天前
scss报错Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0
前端·node.js·sass·scss
thinkQuadratic2 天前
scss预处理器对比css的优点以及基本的使用
前端·css·scss
LinDaiuuj4 天前
scss基础用法
前端·css·scss
活宝小娜4 天前
在Vue 3 + TypeScript + Vite 项目中安装和使用 SCSS
vue.js·typescript·scss
仿生狮子9 天前
tailwind4 如何兼容预处理器
css·postcss·scss
QQ828929QQ12 天前
Sass (Scss) 与 Less 的区别与选择
less·sass·scss
PsG喵喵13 天前
Sass (Scss) 与 Less 的区别与选择
less·sass·scss
菜又爱编程16 天前
【uni-app运行错误】SassError: expected selector @import “@/uni.scss“;
前端·uni-app·scss
积水成江17 天前
【Vue3+Vite指南】全局引入SCSS文件后出现Undefined mixin?一招解决命名空间陷阱!
前端·vue.js·html5·scss
狼性书生20 天前
grunt构建工具:scss转css
前端·css·scss·grunt