Scss url()相对于导入的scss文件进行解析
Scss中的url()函数用于引用外部资源，如图片、字体等。当使用相对路径时，url()函数会相对于导入该scss文件的路径进行解析。
具体来说，当在一个scss文件中使用url()函数引用外部资源时，解析路径的方式如下：
- 相对路径：如果url()函数中的路径是相对路径，那么解析路径时会相对于导入该scss文件的路径进行解析。例如，如果在
styles/main.scss文件中使用url(../images/logo.png)，则路径会相对于styles/main.scss的路径进行解析。 - 绝对路径：如果url()函数中的路径是绝对路径，那么解析路径时会直接使用该路径。例如，如果在
styles/main.scss文件中使用url(/images/logo.png)，则路径会直接使用/images/logo.png。
Scss的url()函数在前端开发中非常常用，可以用于引用图片、字体、音视频等资源。通过使用相对路径，可以方便地管理和引用项目中的各种资源。
以下是腾讯云相关产品和产品介绍链接地址，供参考：
- 腾讯云对象存储（COS）：提供安全、稳定、低成本的云端存储服务，适用于存储和处理各种类型的文件和数据。详情请参考：腾讯云对象存储（COS）
- 腾讯云云服务器（CVM）：提供弹性、安全、稳定的云服务器，可满足各种规模和需求的应用场景。详情请参考：腾讯云云服务器（CVM）
- 腾讯云内容分发网络（CDN）：提供全球加速、高可用、低时延的内容分发服务，可加速网站、应用、音视频等内容的传输和分发。详情请参考：腾讯云内容分发网络（CDN）
请注意，以上仅为腾讯云的相关产品示例，其他云计算品牌商也提供类似的产品和服务。
相关·内容
1回答
Scss url()相对于导入的scss文件进行解析
angular、sass、primeng
我们目前正在将prime ng实现到我们的应用中。我已经在angular.json中的style标记下引用了scss文件。我研究了引用的scss，它还包含多个scss导入。比如来自不同文件夹的@import _layout.scss。问题是，这些导入的scss文件样式中的已用资源是相对于它们所
浏览 42提问于2020-08-10得票数 0
回答已采纳
4回答
为什么CSS链接行为怪异？
html、css、sass
这是我的文件结构。当我键入这样的代码时浏览器不会加载图像，但是当我像这样键入时
background: url("dummy-te
浏览 3提问于2021-01-02得票数 2
回答已采纳
1回答
Webpack 5未捆绑CSS url()资产模块
javascript、webpack、sass、webpack-5
我正在尝试在我的React应用程序中包含一个新的字体。这是使用Webpack构建的。@font-face {
src: url("../..@babel/preset-typescript
浏览 5提问于2021-11-25得票数 2
1回答
Sass导入错误的目录
sass、webpack
我的世袭关系如下：styles/_partial.scss在main.scss中 font-family: 'ProximaNova';}
此处的导入不会导致任何问题。然而，在styles/_partial.<e
浏览 10提问于2016-06-03得票数 0
1回答
使用角-cli创建的角库中的scss编译问题
angular、sass、angular-cli、angular-library
创建(ng build my-lib)一个带有全局scss的角度库，然后绑定到一个文件中并复制到lib的文件夹中。dist-lib/my-lib/lib/sass/my-lib.scss@font-face {
font-family:"Roboto Regularstyles.scss文件中，我将导入<
浏览 0提问于2019-01-02得票数 0
回答已采纳
2回答
未能找到角应用中的函数scss误差
angular、sass
我已经创建了一个全新的角7应用程序，并安装了scss。在构建应用程序之后，我将得到以下错误@import '../node_modules/bootstrap/scss/bootstrap.scss';
./src/penes.css (
浏览 1提问于2019-02-13得票数 1
回答已采纳
1回答
Webpack SASS装载机无法阻止普通SCSS进口
sass、webpack、webpack-dev-server、node-sass
'my_component';});
我的sassLoader配置以前对进行了配置。当我删除它时，我的字体urls再次开始解析，但是我生
浏览 1提问于2016-04-28得票数 12
1回答
文件夹结构：错误描述：Sass版本：ParcelJS通过将我的Sass/Scss代码编译成简单的CSS解决了我的问题，但是我不想在这样一个小项目中使用它。如果我不使用@use或@import，Sass就能够编译我的代码。
浏览 2提问于2022-03-11得票数 2
回答已采纳
2回答
用保龄球定制zurb基础6的正确方法
zurb-foundation、zurb-foundation-6
使用带有bower的zurb 6，使用_settings.scss文件定制它的正常工作流程是什么，这样文件就不会停留在bower_components文件夹中。说我们可以复制设置文件，然后导入到我们的app.scss中。在我的自定义scss文件夹中，我使用settings.scss文件作为模板创建了一个_settings
浏览 1提问于2016-02-17得票数 0
回答已采纳
2回答
如何添加角库的scss到捆绑使用ng-packagr？
angular、angular-material、angular-library、ng-packagr
我正在尝试创建基于scss主题的角(Ng 11)库，我将通过私有npm注册表在单独的项目中使用它。现在，我正在尝试将一个全局scss文件添加到我的库中，并将它与我的库捆绑在一起。@include angular-material-theme($theme);我希望我的包(库包)包含这个scss，这样在安装这个库应用程序之后，就可以将它导入到他们的全局style.scss
浏览 3提问于2021-03-05得票数 3
1回答
在带有SCSS的Gatsby站点中，如何导入本地字体？
sass、fonts、gatsby
努布，盖茨比和SCSS，我想深入到这两者，并学习他们开始新的一年。在遵循之后，我想深入研究并构建一个基于的站点。在src中为SCSS创建了一个名为main.scss的目录，并创建了一个部分目录以引入字体：src/styles/partialsfont-primary;
浏览 4提问于2021-01-11得票数 1
回答已采纳
1回答
Webpack履带装载机相对路径
css、webpack、sass、sass-loader
在使用@import将字体导入到我的主scss文件中时，我遇到了一个问题。问题是字体可怕的_varibles.scss使用相对路径导入字体../fonts/*。这会导致错误，因为webpack试图相对于入口点加载文件，而入口点是sass的主文件。我一直在尝试使用一些选项，比如没有运气的includePaths和像resolve-url-load
浏览 1提问于2018-01-24得票数 1
回答已采纳
1回答
SCSSPHP忽略@import指令或相对路径问题？
php、twitter-bootstrap、sass
我使用的是SCSSPHP，我的文件夹结构如下： /css /mysite.scss/vendor/scssphp/scss.inc.php";
现在，当我尝试加载URL /asse
浏览 0提问于2014-07-29得票数 0
2回答
如何在板主题中添加引导4scss
twitter-bootstrap、sass、shopify、slate
我正在使用板子创建Shopify主题，我想在我的主题中添加引导4scss/*================ BOOTSTRAP ================*/
@import url('vendor/bootstrap/<
浏览 0提问于2018-03-06得票数 0
1回答
browserify/vueify:在所有组件中注入全局scss文件
javascript、vue.js、sass、browserify、vueify
我正在尝试注入全局scss文件(使用变量、混合、颜色等)。导入到Vue中，以使其可用于所有组件(而不是在每个组件中显式导入该文件)。我在path public/app/ main.scss /main.scss中有以下样式：@import "helpers&
浏览 15提问于2019-02-19得票数 0
1回答
解析-url-loader使用了错误的相对路径
javascript、webpack、sass、primeng
下面是我的scss文件的加载方式： test: /\.scss$/, use: 'file-loader'然后我有一个包含以下代码行的文件app.scss：
@import
浏览 1提问于2017-10-30得票数 1
1回答
Sass图像url参考错误，链式导入
reactjs、sass、webpack、sass-loader
钢筋混凝土
这是我的文件夹结构。当我试图将sass1导入到sass2中时，图像的路径不会被解析，因为
浏览 6提问于2017-03-30得票数 2
1回答
正确的@字体-面对路径与webpack的一个包，包括SASS？
npm、sass、webpack
Im :这是字体和一个使用它们的SASS文件：my-package/fonts/font.woff2@font-face { src:
url('./fonts/font.woff') format('woff');
浏览 1提问于2016-08-26得票数 0
0回答
在Nuxt.js中解析外部SCSS文件中的图像路径
javascript、webpack、vue.js、nuxt.js
我正在尝试将某些组件scss文件与它们的Vue组件分离。同时，我还包含了一个全局scss文件，该文件不会被限定作用域。无论我使用哪个文件，我都无法获得要正确解析的/assets或/static映像路径。我的nuxt.config.js示例： css: [
// SCSS file in the proje
浏览 0提问于2017-12-09得票数 5
1回答
Webpack导入含字型面的相关路径
css、url、fonts、webpack、font-face
在Webpack配置中，我为常见文件定义了一个资源根，如下所示： loader: 'sass-loader', includePaths: [ 'src/components/_common' }现在，我在资源根目录中有一个文件_fonts.scss，可以使用@import "fonts";导入它。但是，如
浏览 3提问于2017-09-17得票数 3
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频活动推荐
腾讯云开发者
