vue3在使用@import “./index.scss“报错

原创 2025-05-06 19:22:42 1k 阅读 AI写同款
A-超
A-超 博客等级 码龄6年 墨衍会员 · AI 创作全网分发 墨衍智能分发 本文由作者通过墨衍一键同步至各平台 1分发平台 1k累计阅读 1.1k平均单平台 已同步平台 优快云 微信公众号 微博 知乎 掘金 百家号 博客园 抖音 小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网 我也要
451粉丝56篇原创
关注
用 Sass 模块化系统取代全局导入，消除 1.80.0 引入的 @import 弃用警告 最初，Sass 使用@import规则通过单个全局命名空间加载其他文件，所有内置函数也可全局使用。由于模块系统（@use和@forward规则）已经推出多年，我们现已弃用 Sass@import规则和全局内置函数。@import会导致许多问题，需要手动为 Sass 成员指定命名空间以避免冲突，当多次导入同一个文件时会减慢编译速度，并且使人类和工具都很难分辨给定变量、混合或函数来自何处。模块系统修复了这些问题，并使 Sass 的模块化与其他现代语言的最佳实践相媲美，但只要@import。 阅读详情
AI摘要

博客指出在Vue3中使用@import \./index.scss\会报错，原因是Sass @import规则在Dart Sass 3.0.0中将被移除。提示在Sass 3.0.0之后应使用“@use”来导入样式。

Deprecation Warning: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.

More info and automated migrator: https://sass-lang.com/d/import

 
2 │ @import "./index.scss";

在 Sass 3.0.0.之后 导入样式使用  “@use” ，不在使用  @import 如下：

标签
#vue.js #前端 #javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
重大更新：Sass 1.80 正式弃用 @import！你准备好迁移了吗? 最近在更新之前封装的项目架构时，我发现编译过程中频繁出现@import弃用警告，警告如下:该警告提示表示sass中@import已经废弃. 将会在中删除. 通过警告信息中查看更多, 查看官网描述. 官网提示Sass在 1.80 版本中正式弃用了@import，并推荐使用@use和@forward替代。@import的弃用不仅是Sass团队对技术生态的优化，更是对开发者编写高质量、可维护代码的引导。本文将详细探讨 Sass 1.80 版本弃用@import的原因. 阅读详情

相关推荐

Sass Mixin 核心原理与 Vue3 工程化实战

Sass Mixin 是一种编译期样式模板机制，不同于运行时函数，它通过静态文本替换生成标准 CSS，具备零性能损耗、强兼容性与深度主题支持能力。其核心价值在于实现样式逻辑的模块化封装与复用，支撑响应式布局、深色模式切换、BEM 命名规范等工程需求。在 Vue3 单文件组件中，Mixin 与 `@use` 模块系统协同工作，构成可维护的原子级样式体系；结合 `@content`、`@at-root` 和条件控制流，能构建语义清晰、跨断点、跨主题的样式抽象层。本文聚焦 Dart Sass 2.0+ 环境下 M

weixin_34218890的博客 402

More info and automated migrator: https://sass-lang.com/d/slash-div

sass

qq_36258899的博客 5639

Sass Mixin 语法深度解析：从编译原理到 Vue3 工程实践

Sass Mixin 并非简单的样式复用语法糖，而是 Sass 编译期的核心抽象机制——它基于 AST 节点模板展开、依赖声明时作用域与类型快照，并通过 @include 实现参数传递、@content 内容注入和 @at-root 作用域逃逸。其技术价值在于支撑响应式断点封装、BEM 规范生成与设计 Token 自动化，广泛应用于 Vue3 单文件组件、中后台系统及原子化 CSS 工程。随着 Dart Sass 2.x/3.x 全面弃用 @import、强制启用 @use 模块化，Mixin 的声明契约、

weixin_30655569的博客 423

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

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

m0_68602608的博客 1万+

若依Vue3从Vite迁移到Webpack：关键配置与避坑指南

前端工程化中，构建工具的选择往往直接影响团队的交付效率和长期维护成本。Vite凭借原生ESM按需编译带来极速开发体验，而Webpack则凭借统一的打包模型和成熟生态，在兼容性、插件扩展及运维习惯上拥有不可替代的优势。当项目需要从Vite切回Webpack时，核心并非简单的配置替换，而是理解两者在模块解析、环境变量注入、样式链路和依赖预构建上的本质差异。掌握构建配置的迁移方法，能够帮助团队在保留既有代码范式的同时，平稳切换工具链，尤其适合若依Vue3这类中后台管理系统。从路径别名到DefinePlugin，从

weixin_34055787的博客 252

分位数映射数据后处理-Quantile Mapping后处理 (R语言)

统计后处理器基本上是统计模型，将观察到的关注变量与从气象或水文模型的直接模型输出（DMO）导出的适当预测变量相关联。统计后处理的重要性早已在气象预报中得到认可。早期的工作包括完善的预测(perfect prognosis)，模型输出统计（MOS）和模拟方法（analog method）等模型。 近年来，已经提出了许多其他后处理方法，包括秩直方图校准（rank histogram calibrati...

水滴石穿，绳锯木断 1万+

Sass报错: Using / for division is deprecated

: Using / for division is deprecated and will be removed in Dart Sass 2.0.0. Recommendation: math.div($px, $screenWidth) More info and automated migrator: https://sass-lang.com/d/slash-div

haoyanyu_的博客 7027

基于Qt与PaddleOCR的跨平台OCR工具开发实战

本文详细介绍了基于Qt与PaddleOCR开发跨平台OCR工具的实战经验。通过Qt的跨平台特性和PaddleOCR的高效识别能力，开发者可以快速构建支持Windows、Linux和macOS的OCR工具。文章涵盖了环境配置、核心功能实现、性能优化及打包发布等关键环节，特别针对中文识别、内存管理和多线程处理等常见问题提供了解决方案。

weixin_30296405的博客 89

uniapp 引入uview vue3样式报错

在Vue项目中引入vk-uview-ui组件库时，若在App.vue的SCSS样式中直接导入index.scss报错，可通过修改node_modules下的源文件解决。具体方法是在node_modules/vk-uview-ui/index.scss文件中添加@import "./theme.scss"语句。该操作补全了必要的主题文件引用，从而消除样式导入时的报错问题。注意直接修改node_modules需谨慎，建议后续通过fork维护自定义版本或等待官方更新修复。

hello_bobobo的博客 52

数字电路实验避坑指南：如何正确搭建主从JK触发器测试电路（附Proteus仿真）

本文详细解析了主从JK触发器的工作原理及实验搭建指南，重点解决了常见的Catching Problem现象，并提供了Proteus仿真优化方案。通过元器件选型、电路连接步骤和常见错误排查，帮助读者正确搭建测试电路，确保数字电路实验的稳定性和可靠性。

weixin_30790841的博客 469

Zemax显微镜设计：从物镜到目镜的完整光学系统优化

本文详细介绍了使用Zemax进行显微镜光学系统设计的完整流程，从物镜到目镜的优化技巧。通过实战案例和关键参数设置，帮助读者掌握数值孔径、视场角等核心概念，实现高分辨率显微镜设计。文章特别强调了系统级优化和公差分析的重要性，为科研和工业检测提供可靠的光学解决方案。

weixin_42549451的博客 438

关于引入uview-ui @import “uview-ui/index.scss“；报错

在APP.vue中加上lang="scss。/*每个页面公共css */

wangxinwang996的博客 2135

主题035：计算流体力学(CFD)

计算流体力学（Computational Fluid Dynamics, CFD）是利用数值方法求解流体流动、传热传质等问题的学科。CFD已成为化学反应工程中反应器设计和优化的重要工具。∂ρ∂t+∇⋅(ρu)=0 \frac{\partial \rho}{\partial t} + \nabla \cdot (\rho \mathbf{u}) = 0 ∂t∂ρ​+∇⋅(ρu)=0对于不可压缩流动：∇⋅u=0 \nabla \cdot \mathbf{u} = 0 ∇⋅u=0动量方程：∂(ρu)∂t+∇⋅(ρ

kkchenjj的博客 267

Element Plus：60+ 组件的 Vue 3 组件库，从工单列表到换肤的落地细节

第三次手动给 20 万行工单列表写分页和冻结表头时，你大概率想找个现成轮子。Element Plus 是 Element 团队的 Vue 3 组件库，表格、表单、换肤这些后台硬骨头它都包了。 ## 一分钟速览 它是 Element UI 的 Vue 3 续作，60+ 个组件全部 TypeScript 编写，覆盖表单、表格、导航、反馈四类场景，源码在 `packages/components/`

gitblog_00659的博客 1109

【保姆级教程】YOLOv8_Pose多目标+关键点检测：训练自己的数据集

【保姆级教程】YOLOv8_Pose多目标+关键点检测：训练自己的数据集

m0_51579041的博客 1万+

9、储备池学习：从学习到学习的新范式

本文探讨了基于学习到学习（L2L）框架的储备池计算新范式，提出通过在外循环中优化储备池的超参数（如递归连接权重、输入权重和读出初始化），以提升其在多种任务中的内循环学习性能。研究展示了两种主要实验设置：一是优化储备池用于回归二阶Volterra滤波器任务，显著优于随机基线；二是实现无需调整读出权重、仅依赖内部动态学习非线性函数的能力，表明储备池可快速构建目标函数的内部模型并安装任务先验知识。结合流程图与表格，文章系统呈现了L2L的训练流程、技术细节及实验结果，并讨论了性能提升、泛化能力等开放问题，指出了未来

ujm56789012的博客 503

3 步跑通 Element Plus：Vue 3 后台组件库从安装到换肤完整指南

给中后台项目挑组件库，最先问的往往是三件事：表单校验要写多少样板代码、深色模式要不要返工、按需加载会不会漏样式。Element Plus 就是冲着这些来的——Element 团队出品的免费 Vue 3 UI 组件库，约 70+ 组件，全量 TypeScript + Composition API 实现，主题基于 CSS 变量，改一个变量就能整站换肤。 [![Element Plus 后台管理界面

gitblog_00606的博客 422

图神经网络实战（2）——图论基础

图论 (Graph theory) 是数学的一个基本分支，涉及对图研究。图是复杂数据结构的可视化表示，有助于理解不同实体之间的关系。图论提供了大量建模和分析现实问题的工具，如交通系统、社交网络和互联网等。在本节中，将介绍图论的基本原理，主要涉及三个方面：图属性、图概念和图算法。

盼小辉丶的博客 1万+

Element Plus在Vue3项目中的接入实践：按需引入、主题定制与踩坑解析

Vue3生态的成熟带动了组件库的升级换代，Element Plus作为Element UI的官方Vue3版本，凭借对原有API的延续和完整的高频组件覆盖，成为后台管理系统迁移的首选。其底层依赖Vite构建工具，支持全量与按需两种引入方式，前者适合内网系统快速开发，后者则能有效控制打包体积。在工程实践中，通过SCSS变量或CSS变量可灵活定制主题色并实现暗黑模式，但需注意resolver的sass配置。针对TypeScript报错、图标不显示、样式穿透等高频问题，结合组件封装与性能优化策略，能够显著提升开发效

weixin_30745553的博客 390

C# WinForm 基于DirectShow.dll编写的程序，可边预览边保存视频，音频和图片

基于微软的DirectShow.dll的二次开发1.自动识别连接的摄像头跟麦克风且可以对其进行选择（默认选中第一个）2.可录制wmv和avi两种格式的视频并且都带有音频，avi可以录制的分辨率和帧数进行选择，wmv默认进行了淸晰度优化如不喜欢可去除代码中有相关提示3.可在预览点开之后进行拍照，也可边录制视频边拍照4.添加了视频和音频的压缩功能（酌情使用）这次二次开发发现C#对DirectShow的相关信息太少，这次做完也不敢藏私共享出来，还望大家指正

计算机控制技术及应用

《计算机控制技术及应用》通过总结作者的科研成果和吸收国内外的先进理论、方法和技术，以计算机控制系统的网络化、开放化、智能化和集成化发展趋势为主线索，主要介绍计算机控制系统的基本概念和计算机控制系统的典型形式，计算机控制系统的数学描述与基本分析方法，以及数字PID控制器、最少拍控制系统、达林算法、状态变量设计法等设计方法及其各种改进算法。重点突出计算机控制系统输入输出通道接口的设计方法和典型控制系统的设计案例与实现方法等。

NutUI Vite 项目模板：从零搭建 NutUI Vue 3 开发环境的完整指南

本文围绕 NutUI 仓库内置的 Vite 项目模板（位于 [packages/nutui-playground/src/download/template](https://link.gitcode.com/i/dc478d1ba5bfa0f721fec417b2e8bd80)），系统讲解如何使用 Vite + Vue 3 快速初始化一个 NutUI 组件库项目，并深入剖析模板的依赖构成、按需引

gitblog_01007的博客 182

怀旧版电脑GBC模拟器

再现原版GBC掌机的界面，电脑运行连游戏界面都一样大小，很怀旧，很真实，（英文版）强烈推荐，很小的文件，很难才找到的。

./node_modules/postcss-loader/src/index.jsref--9-oneOf-1-2./reset.css

我的问题是在vue文件中使用引入了一个global.scss文件，而这个global.scss文件本身又引用了一个reset.css文件，一旦在vue文件中@import这个global.scss文件就会报错，而在main.js里引入global.scss就没有问题。 一开始我以为是文件路径或者sass和sass-loader版本问题，但是怎么改都不行，最后我把reset.css文件的后缀名直接改为.scss，然后在global.scss里面直接引入reset.scss，项目正常运行 ...

qq_44739238的博客 728

复分析 阿尔福斯(Ahlfors) 第三版答案 英文

答案分为十章，有部分习题没有答案，全英文复分析阿尔福斯(Ahlfors) 第三版答案

Vue2项目搭建全流程：vue-cli环境、路由状态请求与报错排查

前端工程化的核心是把环境、构建、依赖与代码组织标准化，让项目从“能跑”走向“可交付”。其原理在于用脚手架和配置文件固定版本组合与构建链路，借助路由、状态管理和请求层解耦页面、数据与接口，再通过生命周期钩子掌控组件执行时机。这样能显著减少环境漂移与重复配置，提高后台管理系统、多页应用和移动端页面的开发效率。围绕 Vue2 项目搭建，常见路径是 vue-cli 生成骨架，接入 vue-router、vuex 与 axios，并处理 vue.config.js、Node 版本、sass 编译等问题；遇到 Netw

weixin_34203832的博客 379

BootstrapVue 2.x 快速上手指南：安装配置、模块化引入与构建优化全解析

> 本文以 BootstrapVue 官方 "Getting Started" 入门文档为主线，系统讲解在 Vue.js 2.x 项目中使用 BootstrapVue 的完整路径：从依赖环境与 HTML 全局规范，到模块打包器（webpack/rollup/Parcel）集成、SCSS 主题定制、Tree shaking 按需引入，再到 Nuxt.js 模块、Vue CLI 3、浏览器 CDN 直

gitblog_00490的博客 650

uni-app从HBuilderX迁移到Vue CLI的工程化实践

uni-app 是基于 Vue 的跨端框架，其核心价值在于一次开发、多端部署。然而当项目规模增长、协作变复杂、第三方 SDK（如 AWS S3、WebAssembly、飞书开放平台）接入需求增多时，HBuilderX 的封闭构建体系会严重制约工程可控性。本文围绕 Vue CLI 4.5.15 + @dcloudio/vue-cli-plugin-uni 的稳定组合，解析 webpack 配置自由度、SCSS 全局变量注入、rpx 布局兼容、小程序发行控制等关键技术原理，揭示 HBuilderX 启动修改端口

weixin_34124651的博客 351

从零构建高可配置前端导航组件：设计思路与Vue3+TypeScript实现

在现代Web应用开发中，组件化是提升代码复用性和可维护性的核心思想。其原理在于将UI界面拆分为独立、可复用的功能单元，通过清晰的接口进行通信。这种模式的技术价值在于显著降低了开发复杂度，促进了团队协作，并能快速响应产品需求变更。在应用场景上，导航栏作为几乎所有Web应用的通用门户组件，其可配置性、样式定制和响应式适配是工程实践中的常见痛点。本文以Vue 3和TypeScript技术栈为例，深入探讨如何设计并实现一个高度可配置、支持动态菜单和主题切换的导航组件，即“小熊猫”导航组件。该方案通过定义清晰的配置对

weixin_34323858的博客 368

Sass Mixin 是 CSS 工程化的函数式内核

CSS 作为声明式语言，天然缺乏函数、作用域和编译期逻辑能力；Sass Mixin 正是在这一能力缺口上构建的可编程接口——它支持参数校验、条件分支、内容注入与递归生成，在编译阶段完成样式逻辑的类型契约与错误拦截。相比运行时 JS 控制或 utility-first 的原子类组合，Mixin 提供更早的反馈机制（如 `@error` 编译中断）和更强的封装性，广泛应用于响应式栅格、主题系统、无障碍适配等企业级场景。尤其在 Dart Sass 模块化演进中，Mixin 已成为 `@use` 体系下替代 `@i

weixin_30635053的博客 578
上一篇： vue3使用轮播图组件swiper
下一篇： js获取网站地址的参数方法
点赞 1
评论 0
书签 书签 0
A-超
A-超
博客等级 码龄6年 451粉丝 56原创
+ 关注
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值