解决 vite 中报错SassError: This file is already being loaded

Vite中全局scss变量冲突解决方案

最新推荐文章于 2025-04-10 17:11:41 发布

原创最新推荐文章于 2025-04-10 17:11:41 发布 · 4.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #html #scss

文章讲述了在使用Vite开发时，遇到全局scss变量与js或ts中重复引入导致的SassError。解决方法是创建一个global.module.scss文件，将需要全局使用的scss变量导入并替换原有引用。

当使用vite引入 scss全局变量时（例如：variables.module.scss），如果此variable.module.scss全局变量还在 js 或者 ts中引入使用的话，那么会报错SassError: This file is already being loaded。

那么要如何解决此问题呢？很简单，只需要添加一个 global.module.scss文件即可。

// 引入要进行全局使用的 scss, 如 variables.module.scss
@import 'variables.module.scss';

然后在 js 或者 ts中，把引入的 variables.module.scss变为global.module.scss即可

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

很久很久以前的你

关注关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

在应用轮播图时报错

知识改变命运，ヾ(◍°∇°◍)ﾉﾞ【求关注】

05-15

1404

在应用轮播图时报错，

Vue3 - Vite解决报错ReferenceError: module is not defined in ES module scope（vue3+vite项目编译运行或打包报错，详细排查解决）

2 条评论

很久很久以前的你 2025.01.03
主要是为了解决冲突用的, 其实编译后已经引入过了的.

大雨倾城 2024.09.26
大佬，添加空的global.module.scss文件，直接引入。可以使用全局变量，这是什么原因呢？

ts 使用sass变量提示在string上不存在这个属性

qq_15006083的博客

02-18

3240

ts 使用sass变量提示在string上不存在这个属性** 解决办法：定义声明模块variables.scss.d.ts，如下图：这样就解决了问题如果配置了全局的sass变量，还会引发一个问题，提示This file is already being loaded. 解决办法：删除variables.scss.d.ts文件和variables.scss中的导出代码，和新建一个导出sass变量的scss文件(export.scss)和对应的声明文件(export.scss.d.ts)，expor

【Electron】Vite+Ts 项目内配置路径别名 “@/“

m0_64494670的博客

01-03

2940

[plugin:vite:import-analysis] Failed to resolve import "@/components/HelloWorld.vue" from "src\App.vue". Does the file exist? C:/Users/ttatt/Desktop/te/getLive/gitee/webElectron/src/App.vue:2:23 1 | import { defineComponent as _defineComponent } from "vu

Syntax Error: SassError: This file is already being loaded. 这个错误。原因是将这个scss文件重复引入了, 修改如下：

weixin_42777161的博客

01-19

2154

【代码】Syntax Error: SassError: This file is already being loaded. 这个错误。

【vue踩坑】：SassError: This file is already being loaded

TanMengyi的博客

11-23

2588

所以就是我在vue.config.js全局配置了，就不用再单独引入咯…根据提示，因为是说我已经全局引入变量了，不用在文件里单独引入了。

element plus 主题色替换

m0_67402970的博客

03-08

982

最近在学习vue3.0，再配合饿了吗，尝试重构一个项目。因为element ui只适用于2.x不适用于3.x。所以只能使用element plus。现在我有一个需求是需要把主题色需要进行替换。使用element plus官网提供的方法设置scss均无效。尝试降低至1.1.0-beta.1之前的版本，这样可以使用和element ui一样的主题编辑器进行设置。但是在网站设置颜色后点击下载，直接报错。这个方法也已失败告终。最后查阅资料使用element-theme可以来解决这个问题。解决方案如下： 1、从官

Vue3 - vite 项目报错：Uncaught ReferenceError: require is not defined（解决 vue3 vite 项目无法识别 require 语法导致报错）

热门推荐

🏆 前端领域优质创作者

12-16

2万+

vue3，vite，报错解决，vue3+vite报错requireisnotdefined，vue3vite引插件不识别require，老插件必须用require怎么办，vite项目插件要求使用require引入但报错，vue3不兼容require导致第三方包插件无法使用，vue3vite中使用require报错怎么办，解决Vite+vue3使用第三方依赖报错“requireisnotdefined”问题，vite项目require语法兼容问题解决requireisnotdefine

Vue3 - Vite运行打包时Uncaught ReferenceError: process is not defined（解决vue3+vite报错process is not defined）

🏆 前端领域优质创作者

03-26

7190

vue3，vite，vue3+vite报错，process，UncaughtReferenceError:processisnotdefined，浏览器控制台报错processisnotdefined解决方法，vue3如何解决报错，vite报错怎么办，前端打包UncaughtReferenceError:processisnotdefined，npmrunbuild打包报错，vite打包时出现错误，vue3打包运行找不到process，热更新会报错UncaughtRefer

vite 启动报错：TypeError: crypto$2.getRandomValues is not a function

猿小白的博客

03-25

4621

error when starting dev server: TypeError: crypto$2.getRandomValues is not a function

Error: This file is already being loaded.

Ky2lin

04-10

329

项目中需要引入一个scss文件作为全局变量，引入之后在本地编译时可用，但是打包之后就会报错Error: This file is already being loaded.，原因是不能把scss文件放在assets目录下。把scss文件换个位置放就可以了，如下图。项目环境：Vite+Vue3。

记vue3+vite+sass使用@use This file is already being loaded

biao5656的博客

12-23

623

1.我用 create vue@latest创建的项目后，引入sass报错，一个是This file is already being loaded，还有一个是 [sass] Undefined variable。2：取消import 引用，解决解决This file is already being loaded问题。目前已解决我的报错问题。

IOS-Files is already loaded

IMTIY的博客

03-20

428

错误信息： The Asset Bundle 'Memory' can't be loaded because another Asset Bundle with the same files is already loaded.(Filename: Line: 431)Argument Exception: An element with the same key already exists...

sass安装全流程——解决vite报错：[sass] This file is already being loaded

qq_36202011的博客

01-16

1131

第三步：在vite.config.js中写css配置引入全局变量，使变量可以直接在文件中使用。第二步：在src/styles目录下创建全局样式文件。背景：需要把项目中的less改为sass。第一步：安装sass需要的依赖。

CocosCreator2.3.1切换场景出现Failed to load scene ‘xxx‘ because ‘xxx‘ is already being loaded问题的解决方案

田螺姑娘的博客

12-14

3314

CocosCreator2.3.1切换场景出现Failed to load scene ‘xxx’ because ‘xxx’ is already being loaded问题的解决方案问题展示效果图解决方案 cc.Class({ extends: cc.Component, properties: { video: cc.VideoPlayer,//视频组件 progress: cc.ProgressBar,//进度条组件 labe

解决vue引入组件路径报错“Already included file name ”

qq_45761438的博客

10-22

2029

Already included file name 'e:/新建文件夹/test1/src/components/TestVue3.vue' differs from file name 'e:/新建文件夹/test1/src/components/Testvue3.vue' only in casing.这个错误信息表明你的项目中存在两个文件名仅在大小写上有所不同的文件。在某些文件系统（如Windows）中，文件名是不区分大小写的，因此它无法区分和这两个文件。

vue3+vite中报错[plugin:vite:css] [sass] Undefined mixin

浩星

11-07

7063

vue3项目中使用sass时报错不认识mixin.

在vue 中使用 sass 并出现loader重复编译报错问题

Terenceno的博客

06-27

1456

1.安装sass :npm install node-sass sass-loader --save-dev 2.找到build中webpack.base.conf.js,在rules中添加scss规则 { test: /.scss$/, loaders: [‘vue-style-loader’, ‘css-loader’, ‘sass-loader’] } 出现因为sass-loader重复解...

2022-03-01 Element UI切换主题、动态换肤功能

SHEN_JAIMEI的博客

03-01

1万+

以下方法适用于已经完成的项目，需要加主题切换、换肤功能。

打包报错Error: Module loop: this module is already being loaded. ╷ 1 │ @use "@/assets/style/index.scss" as *;@forward './variables.scss';

03-14

<think>好的，我现在需要帮助用户解决Sass模块循环加载导致的打包报错问题。用户提到具体的错误信息是“Module loop: this module is already being loaded”，并且涉及@use和@forward指令以及variables.scss文件。根据用户提供的引用内容，我需要综合这些信息给出解决方案。首先，我需要理解问题的根本原因。循环加载通常发生在多个Sass文件相互引用时，形成一个闭环。例如，A.scss引用了B.scss，而B.scss又引用了A.scss，这样就会导致循环依赖，Sass编译器无法处理这种情况，从而报错。用户提供的引用中，引用[1]提到了在vite.config.js中配置全局变量，通过additionalData引入variables.module.scss，这样可能导致所有scss文件都自动加载这个变量文件。如果variables.module.scss本身又通过@use或@forward引用了其他文件，而这些文件又间接引用了variables.module.scss，就会形成循环加载。引用[3]中的解决办法是删除variables.scss.d.ts文件和导出代码，并新建一个export.scss来引入variables文件，并在TypeScript中导出变量。这可能通过重构模块的引入方式来打破循环依赖。接下来，我需要整理解决方案的步骤： 1. **检查循环引用路径**：用户需要检查所有相关的scss文件，特别是variables.scss和其他模块之间的引用关系，确定是否存在相互引用的情况。比如，是否有文件A引入variables，而variables又引入文件A的情况。 2. **避免全局自动加载**：根据引用[1]，vite的配置中使用了additionalData全局引入variables.module.scss。这可能导致每个scss文件都隐式加载variables，如果variables本身又引用了其他文件，而这些文件又需要variables，就会形成循环。解决方法是在vite.config.js中移除additionalData中的全局引入，改为在需要的文件中显式@use或@import variables。 3. **重构变量导出结构**：如引用[3]所述，可以创建一个新的export.scss文件，专门用于导出变量，而variables.scss仅包含变量的定义。然后在需要使用变量的地方，通过@use引入export.scss，而不是直接引入variables.scss。同时，生成对应的d.ts声明文件，确保TypeScript能够识别这些变量。 4. **使用@forward代替@use**：如果需要在多个文件中共享变量，可以考虑使用@forward来转发变量，而不是直接@use引入。这样可以避免直接加载整个模块，减少循环的可能。 5. **清理生成的文件**：删除可能引起冲突的.d.ts声明文件，如variables.scss.d.ts，并重新生成正确的声明文件，确保它们不会导致模块解析错误。 6. **验证配置更改**：修改vite.config.js后，需要重启开发服务器或重新打包，以确保配置生效，并检查是否仍然报错。在实施这些步骤时，需要注意各个文件之间的依赖关系，确保没有形成闭环。同时，可能需要调整TypeScript的引用方式，确保变量能够正确导出和引用。可能遇到的问题包括：用户在移除全局引入后，某些文件没有显式引入variables，导致变量未定义。因此，需要逐一检查各个scss文件，添加必要的@use语句。此外，如果使用@forward，需要正确配置路径，避免路径错误导致的加载失败。总结来说，解决方案的核心是消除模块间的循环引用，调整全局引入配置，重构变量导出方式，并确保TypeScript声明文件的正确性。通过这些步骤，应该能够解决Sass模块循环加载导致的打包错误。</think>### 逐步解决方案要解决Sass模块循环加载导致的打包报错（`Error: Module loop: this module is already being loaded`），可按以下步骤操作： --- #### **1. 检查循环引用路径** - **现象**：多个SCSS文件通过`@use`或`@forward`形成环形依赖。 - **示例**： ```scss // variables.scss @use "colors"; // 若colors.scss又引用了variables.scss ``` - **操作**：检查`variables.scss`及其关联文件（如`colors.scss`、`mixins.scss`等）的引用链，确保无闭环。 --- #### **2. 移除全局自动加载配置** - **问题根源**：Vite/Sass的全局配置导致所有SCSS文件隐式加载`variables.scss`，若该文件又引用其他依赖，可能触发循环[^1]。 - **修改`vite.config.js`**： ```javascript // 原配置（移除additionalData中的全局引入） css: { preprocessorOptions: { scss: { // 删除或注释以下配置 // additionalData: '@use "@/styles/variables.module.scss" as *;' } } } ``` - **替代方案**：在需要变量的文件中显式引入： ```scss // 单个文件头部添加 @use "@/styles/variables.module.scss" as *; ``` --- #### **3. 重构变量导出结构** - **步骤**： 1. **新建`export.scss`**： ```scss // export.scss @forward "@/styles/variables.module.scss"; // 仅转发变量，不生成重复代码 ``` 2. **修改`variables.module.scss`**： ```scss // 删除所有@use/@forward语句，仅保留变量定义 $primary-color: #409EFF; ``` 3. **生成类型声明文件**（解决TS报错）： - 创建`export.scss.d.ts`： ```typescript // export.scss.d.ts export const primaryColor: string; ``` 4. **删除冲突文件**： - 移除自动生成的`variables.scss.d.ts`（避免声明冲突）[^3]。 --- #### **4. 调整模块引用方式** - **使用`@forward`代替`@use`**： ```scss // colors.scss @forward "@/styles/export.scss"; // 仅转发，不直接加载 ``` - **引用变量时显式指定命名空间**： ```scss @use "@/styles/export.scss" as vars; .header { color: vars.$primary-color; } ``` --- #### **5. 验证配置并重启服务** - **重启Vite**：确保配置生效。 - **检查打包结果**：若仍报错，使用`console.log`或Sass调试工具追踪加载顺序。 --- ### 相关技术原理 1. **`@use`与`@forward`的区别**： - `@use`会加载模块并生成命名空间。 - `@forward`仅转发模块内容，不直接加载，可避免重复执行代码[^2]。 2. **全局注入的副作用**：全局`additionalData`会导致每个SCSS文件头部插入指定代码，若代码包含依赖逻辑，易引发循环。 --- ### 相关问题 1. **如何避免Sass全局变量污染？** > 推荐通过`@use`显式引入变量并指定命名空间，而非全局注入。 2. **Vite中如何正确配置SCSS模块化？** > 需禁用全局`additionalData`，结合`@use`和`@forward`拆分变量层[^2][^3]。 3. **Sass循环加载的常见场景有哪些？** > 多发生在组件库主题配置、多层级变量引用时，需通过重构依赖关系解决。