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

最新推荐文章于 2024-06-04 02:29:16 发布
最新推荐文章于 2024-06-04 02:29:16 发布
阅读量2.1k 收藏
点赞数 1
文章标签： 前端 javascript html scss
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lx11573/article/details/134272564
版权

当使用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即可

很久很久以前的你
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vite-sass-alias-bug
03-25
vite-sass-alias-bug 当vite加载带有别名的嵌套sass（不是scss）文件时，如果该文件具有@import，则sass编译器将引发错误。 但是，它在不使用别名时有效。 与从节点模块使用@import加载sass相同。 要重现，只需打开sass.sass文件，然后取消注释每种情况。 然后运行npm start
vite-wiki：:page_facing_up:TheVite Wiki
02-05
如何在vite.wiki上编写文档？ 环保 节点：> = 9.xx 纱线：> = 1.3.xx 安装纱 brew install yarn 关于纱线安装，请移至 安装 cd vite-wiki yarn 动笔 npm run dev 如何包括静态资产？ 参见
Syntax Error: SassError: This file is already being loaded. 这个错误。原因是将这个scss文件重复引入了, 修改如下：
weixin_42777161的博客
01-19 1167
【代码】Syntax Error: SassError: This file is already being loaded. 这个错误。
Syntax Error: SassError: expected selector.报错解决方法
weixin_53935634的博客
03-28 4668
报错原因 是因为 在scss 中使用了/deep/样式穿透。 在less 中可以这样写。 出现此报错 ，只需要 将/deep/替换成::v-deep即可。
Syntax Error: SassError: Can’t find stylesheet to import.报错（ 已解决）
最新发布
y7894563258的博客
06-04 846
在跟写黑马《iHRM人力资源后台管理》p9时遇到此问题。
解决报错：Syntax Error: SassError: @use rules must be written before any other rules.
qq_38969618的博客
12-08 5607
在vue.config.js中，将之前使用@import引入scss写法修改为：@use “引入scss文件路径” as *；写法即可。 正确写法截图如下： sass报错截图如下：
【vue踩坑】：SassError: This file is already being loaded
TanMengyi的博客
11-23 1317
所以就是我在vue.config.js全局配置了，就不用再单独引入咯…根据提示，因为是说我已经全局引入变量了，不用在文件里单独引入了。
IOS-Files is already loaded
IMTIY的博客
03-20 339
错误信息： 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...
vue3解决：[vite] Internal server error: Preprocessor dependency “sass“ not found. Did you install it?
热门推荐
狮子座的男孩
06-25 1万+
【代码】vue3解决：[vite] Internal server error: Preprocessor dependency "sass" not found. Did you install it?
vite sass 报错问题
借人之智，完善自己
05-01 4157
今天学些vite, 使用scss里面的scop里面的时候，运行报错，提示错误内容如下: internal server error preprocessor dependency sass not found. did you install it vite 从网上找了好几个，说是安装各种东西，都不是很理想，终于在一片博客里面，发现了下面的指令： npm install sass --save-dev 运行了之后，系统就能够正常运行了，希望这个博客也能解决你的问题 ...
微信小程序报错：this.setData is not a function的解决办法
11-28
微信小程序 报错：this.setData is not a function 在page中定义的代码如下，代码会报错：this.setData is not a function <strong> pasteEncryptedText:function()</strong>{ let decryptedPass = this.data....
vite_ruby：:high_voltage:Ruby中的Vite.js，为您JavaScript体验带来欢乐
03-04
是将前端工具作为Ruby进行编程，纯属喜悦！ :smiling_face_with_heart-eyes: ... gem 'vite_rails' # vite_hanami for Hanami apps, vite_ruby for Rack apps 然后，运行： bundle install bundle exec vite install
vite-vue3:维生素E-vue3
03-25
Vue3项目模板已配置Vuex、Vue-Router、ESlint、prettier、Vant项目设置yarn install编译和热重装以进行开发yarn dev编译并最小化生产yarn build预览生产yarn serve整理和修复文件yarn lint自定义配置请参阅。
vite-plugin-psvg:PSVG的Vite
05-24
PSVG Vite插件 安装 安装 npm i vite-plugin-psvg -D # yarn add vite-plugin-psvg -D 将其添加到vite.config.js // vite.config.js import PSVG from 'vite-plugin-psvg' export default { plugins : [ PSVG...
vite-vue2.6:练习vue
05-25
【vite-vue2.6：Vue.js 2.6实践与Vite集成】 Vue.js 2.6是流行的前端框架之一，它以其简洁的API、高效的虚拟DOM和强大的生态系统而受到开发者的喜爱。Vite是由Vue.js作者尤雨溪创建的新型前端构建工具，它利用了...
vite：Just Works:trade_mark:的静态站点生成器； 权力https：icyphox.sh
02-04
我不能打扰用法$ vite init path/to/project$ vite new blog/some-post.md # `pages/` is implied 这将创建pages/blog/some-post.md 。 进而： $ vite build # in project directory 渲染HTML将位于build目录中
vite配置scss无效问题
前端很忙
10-09 6893
如何生成vite的vue项目，网上教程已经有很多，在此就不多说了，在此聊一聊在刚接触vite时，配置scss所遇到的问题。 首先执行初始化项目命令，并安装依赖，运行项目： npm init @vitejs/app vite-test cd vite-test npm install npm run dev 写入样式内容： body { background-color: pink; color: orange; } 安装sass npm install sass -D
vue3 vite scss全局变量同时在style和js文件中使用时发生的错误解决
hp9999的博客
08-15 5476
vue3 vite scss sass Error: Module loop: this module is already being loaded js style
vite报错Uncaught ReferenceError: require is not defined
09-08
vite报错"Uncaught ReferenceError: require is not defined"是由于在vite项目中使用了require方法，而require方法不是vite中的方法。 在vite中，由于其采用了ES模块的方式来处理代码，不再支持CommonJS的require语法。因此，当我们在vite项目中使用require时，会导致该错误的出现。为了解决这个问题，我们可以采用import语法来替代require语法来引入资源。通过使用import语法，我们可以在vite项目中正确地引入图片资源或其他资源。<span class="em">1</span><span class="em">2</span> #### 引用[.reference_title] - *1* [Vue 报错TypeError: this.$set is not a function 的解决方法](https://download.csdn.net/download/weixin_38550146/12948478)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [解决vite项目报错：ReferenceError require is not defined](https://blog.csdn.net/web18224617243/article/details/123323299)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值