vue 项目使用 @import url(‘‘)和 @import引入scss文件问题小记

最新推荐文章于 2025-05-06 19:54:02 发布
最新推荐文章于 2025-05-06 19:54:02 发布
阅读量1.3k 收藏
点赞数 2
CC 4.0 BY-SA版权
文章标签： vue.js scss 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_38233172/article/details/131549130
文章探讨了在样式文件中使用@importurl()时，遇到变量和插值语法无法生效的问题。与@import和require不同，当换用@import引入样式后，问题得到解决。作者表示正在寻找问题根源，并邀请其他专家进行分析。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在样式文件是用变量、插值语法等使用@import url('')会导致变量和插值语法不生效，

换成@import ''引入样式 则一切正常，找了一些文章都在说link 和 @import以及require 的区别

具体为啥目前还不清晰，以后找到了根源问题，会继续做补充。。。。。也期待大佬做详细的分析

nnlss
关注
Vue与ElementUI
qq_57093115的博客
01-07 814
创建View文件夹，在其中编写视图组件在router文件夹下的index.js中配置路由在主程序入口main.js中配置路由和elementUI的使用在主APP.vue中配置视图的使用。
vue 共用的TagType组件折腾小记
郝峰vip的博客
12-06 654
前沿： 一个tap页点击切换的共用的组件。如图所示： step1:新建一个tapTag.vue,内容如下 <template> <div class="TagTypeMoudle"> <span class="flagButton" v-for="(item,index) in UnderTheFlagType" ...
vue-remote-import:通过URL导入远程VUE组件
05-06
介绍 该模块用于通过url加载远程VUE组件。 因此，您可以在路由器，全局或本地组件参考中使用它。 这个怎么运作 它将使用import-html-entry包加载html文件，因此html文件就像组件的最小描述。 然后它将解析它，以获得html模板，样式和脚本。 但是目前只有脚本是有用的。 然后它将执行所有脚本并获得执行结果。 因此，您应该在远程组件项目中返回组件对象。 您还可以返回多个组件。 例如： 在vue路由器中： import remoteImport from 'vue-remote-import' ... let router = new Router([ { path: '/login', name: 'login', component: () => remoteImport('http://domain/components/login/index.ht
CSS 中 @import url（）
yuxisanno139的专栏
10-09 1294
@import url（）总结： 1，@import url（）机制是不同于link的，link是在加载页面前把css加载完毕，而@import url（）则是读取完文件后在加载，所以会出现一开始没有css样式，闪烁一下出现样式后的页面(网速慢的情况下)。 2，@import 是css2里面的，所以古老的ie5不支持。 3，当使用javascript控制dom去改变样式的时候，只能使
CSS中的@import指令
最新发布
前端小巷子的博客
05-06 1050
@import 指令作为CSS的一部分，提供了样式表引入的另一种方式。虽然它在某些场景下很有用，但在性能关键的场景下应谨慎使用。
scss中@import “xxx“和@import url(“xxx“)的区别
qq_42372534的博客
02-07 917
不会，scss文件引入另一个scss文件并且想使用其中的变量，要用@import “xxx.scss”.会经过sass-loader处理，而。
@import url(../image/css)的用法
weixin_34198881的博客
07-17 1429
1、@import url(../image/css);可以加载css文件2、@import url(../image/css);可以写在html里加载css文件，也可以写在css文件里加载css文件：比如test1.css、test2.css、main.css文件，有三个css文件，浏览器要下载三个文件， 假如在main.css里@import url(test1.css);@import ...
CSS中@import url()
weixin_30859423的博客
05-24 538
@import url( )总结： 1.import url( )机制是不同于link的，link是在加载页面前把CSS加载完毕，而@import url( )则是读取完文件后加载，所以会出现一开始没有CSS样式，闪烁一下出现样式后的页面（网速慢的情况下）。 2.@import是css2里面的，所以古老的ie5不支持 3.当使用javascript控制dom去改变样式的时候，只能使用link...
vue-折叠面板效果折腾小记
郝峰vip的博客
12-11 890
前沿 人生在于折腾，代码也在于折腾，再折腾中进步，再折腾中寻找更好的方法 最近在开发项目中遇到一个带动画效果的手风琴折叠面板，看了element-ui的折叠面板，发现并不适用于自己的项目，于是乎就决定自己搞一个，说干就干，把我搞得过程记录下来，一方面方便自己学习，记录，一方面帮助大家。有什么错误的地方或者写的不好的地方请多多指正。 element-ui 折叠面板效果图 话不多说，先上代码。...
vue 网站右侧楼层导航效果折腾小记
郝峰vip的博客
12-11 1260
前沿 在项目中遇到楼层导航的需求，于是乎就开始撸代码，需要加一些动画，这时候就需要用到scroll属性，有些忘记了，就先好好温习了一下。最终还是搞出来了。补：这个组件需要引用jquery,后期尝试引用vue搞一个，期待更新。 step1:先新建一个公共的文件就叫RightNavigation.vue。 <template> <div class="FloorNavigat...
前端主流面试官必问超详细面试题(整理完以秃头)持续更新中
qq_43375584的博客
07-07 4437
CDN利用最靠近每位用户的服务器，更快、更可靠地将音乐、图片、视频、应用程序及其他文件发送给用户，来提供高性能、可扩展性及低成本的网络内容传递给用户。CDN的作用：（1）在性能方面，引入CDN的作用在于：（2）在安全方面，CDN有助于防御DDoS网络攻击：懒加载也叫做延迟加载、按需加载，指的是在长网页中延迟加载图片数据，是一种较好的网页性能优化的方式。 比如：在较长的网页中。如果有很多图片，所有的图片都被加载出来，而用户只能看到可视窗口的那一部分图片数据，这样就浪费了性能。如果我们使用图片的懒加载就可以解决
关于css @import url（）总结
Akay的Web技术博客
04-08 1145
      今天群里无意谈到了@import url（），不太常用，争论很大。一开始是由于一个兼容问题： @import url（/css/a.css） 很简单但出现了兼容问题，在ff下无法调用样式，大家都以为是@import搞的怪，但用link后问题依然出现。经过一番讨论原来是绝对路径在ff下是不认的。 对@import url（）做一下总结： 1，@import url（）机制是不同于li
@import
weixin_34174105的博客
05-20 263
@import的具体语法 @import<url><media_query_list> <media_query_list>：[<media_query>[','<media_query>]*]? <media_query>：[only | not]?<media_type>[and<e...
link与@import url()
Shellin_F的博客
04-08 1253
下面有关CSS中link和@import的区别，描述错误的是？ 正确答案: D   你的答案: A (错误) link属于XHTML标签，而@import完全是CSS提供的一种方式 当一个页面被加载的时候，link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载 link在支持CSS的浏览器上都支持而@import只在5.0以上
使用@import url()对资源文件进行导入
热门推荐
pansanday的专栏
10-16 1万+
在使用
vue引入外部URL链接
Chona
02-28 4663
vue使用v-html引入外部URl链接
scss中webpack不打包@import url()引入的scss解决方案
yanhappiness
10-19 7942
解决方案 1.先讲解决方案 将 @import url("./**.scss") ; 改为 @import "./**.css"; 原因 共同点： 首先这两种引用方式都是从其他样式表导入样式规则到当前样式表中。 不同点： @import url 是css的语法规则 @import [ &lt; string &gt; | &lt; url &gt; ] [ &lt; media...
html文件中用import,@import引入CSS文件
weixin_42516414的博客
06-17 4301
@import url (url) sMedia ;注明：url : 运用相对于或相对地点指定导入的内部花色表文件。至关于link引入CSS文件。(理解link与@import判袂和如何决意)css @import使用常用两种办法第一种：html源代码(html文件里)直接引入外部花色表CSS文件html文件index.html代码：import使用实例 www.CSS5.com @import ...
vue中import的使用
m0_55717177的博客
11-25 1456
三方插件引入方式 import ElementUI from ‘element-ui’ css 引入方式 import ‘iview/dist/styles/iview.css’; 在 style 中引入 css 的方式 <style> @import url(../../assets/css/defaultStyle.css); </style> 组件引入方式 import setGrid from ‘./setGrid’; 引入公共方法 多个方法 当然需要注意index.js
vue引入scss的@function
04-02
### 如何在 Vue 组件中正确引入 SCSS 自定义函数 要在 Vue 中使用 SCSS 的 `@function`，可以通过创建一个独立的 SCSS 文件来存储这些函数，并通过 `@import` 将其导入到组件样式部分。以下是具体方法： #### 创建 SCSS 函数文件 首先，在项目的 `src/styles` 或其他合适目录下创建一个新的 SCSS 文件（例如 `_functions.scss`），并在此文件中定义所需的 SCSS 函数。 ```scss // src/styles/functions.scss @function calculate-size($base, $multiplier) { @return $base * $multiplier; } ``` 此函数接受两个参数 `$base` 和 `$multiplier` 并返回它们相乘的结果[^1]。 #### 在 Vue 组件中使用 SCSS 函数 接下来，在需要使用的 Vue 组件中通过 `@import` 导入该函数文件。以下是一个完整的示例： ```html <template> <div class="example"> This box has a calculated size. </div> </template> <script lang="ts"> export default {}; </script> <style scoped lang="scss"> @import "@/styles/functions.scss"; .example { width: calculate-size(100px, 2); // 使用自定义函数计算宽度 height: calculate-size(50px, 3); // 使用自定义函数计算高度 background-color: lightblue; } </style> ``` 上述代码展示了如何在一个 Vue 单文件组件中调用之前定义的 `calculate-size` 函数[^2]。 #### 配置 Webpack 或 Vite 支持 SCSS 为了确保项目能够识别和编译 SCSS 文件中的函数，需确认构建工具已正确配置支持 SCSS。如果使用的是 Vite，则可以在 `vite.config.ts` 中安装并配置 `sass` 及相关插件；如果是基于 Webpack 的环境，则应确保安装了 `node-sass` 或 `dart-sass` 以及相应的加载器。 对于 Vite 用户，可以参考如下配置片段以启用全局 SCSS 功能或局部导入功能[^4]: ```typescript // vite.config.ts import { defineConfig } from "vite"; import vue from "@vitejs/plugin-vue"; import sass from "vite-plugin-sass"; export default defineConfig({ plugins: [ vue(), sass({ options: { additionalData: '@import "./src/styles/functions.scss";', // 添加全局可用的 SCSS 资源 }, }), ], }); ``` 这样设置后，无需每次都在单个组件中手动导入相同的 SCSS 文件即可直接访问其中声明的内容。 --- ### 注意事项 - 如果遇到变量未定义或者路径错误等问题，请检查 SCSS 文件的实际位置及其相对路径是否匹配。 - 对于大型项目推荐将常用的功能封装成单独模块以便维护与重用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值