CSS中，SASS/SCSS语言的‘@/‘路径引入问题

最新推荐文章于 2025-09-08 00:25:48 发布
原创 最新推荐文章于 2025-09-08 00:25:48 发布 · 1.6k 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #sass

本文介绍了Webpack中的路径别名`@`的概念，指出其具体路径取决于webpack配置文件中的设置。在SCSS中，使用`@`别名时需要在前面加上`~`。例如，背景图片引用可以写为`background:url('~@/assets/common/leftnavBg.png') no-repeat 0 100%;`。了解这一技巧有助于优化前端项目的代码组织和模块引用。

@/ 是webpack设置的路径别名，代表什么路径，要看webpack的build文件夹下webpack.base.conf.js里面对于@是如何配置，在scss中，如果我们想要使用@别名，需要在前面加上一个~才可以

例如:

background: url('~@/assets/common/leftnavBg.png') no-repeat 0 100%;

 

SCSS迷你书(下) - SCSS中@指令
CRPER
03-01 4634
@import指令SCSS的@import是css的加强版本,共有以下几种方式可以互相导入引用;注意点
SASS/SCSS一篇全通
chuuuing的博客
05-24 1496
从0开始学习SaSS，看完就够够的了。SaSS中文翻译为“语法上很棒的样式表”，并且自喻为拥有超能力的CSS，听着就特别臭美。
scss 中的 url 路径问题
管家 的博客
10-28 3830
今天维护老项目的时候，意外发现所有的图片资源都不见了，分析后发现是scss中的 background: url() 找不到位置了，并且展示在浏览器中是 url([Object object]) 这种格式。 这个应该就是相对路径，引入图片引起的问题，很简单一个库，就解决了 https://github.com/bholloway/resolve-url-loader 注意在 ...
scss中@如何使用？
m0_57236802的博客
04-22 773
符号在 SCSS（Sassy CSS）中表示变量。这使得你可以在代码中轻松地重用、维护和更新这些值。这些指令提供了额外的功能和编程逻辑，以便在 CSS 生成之前创建更灵活和可维护的样式。当你需要更改这些值时，只需更新变量的值，而不必在整个代码中手动查找和替换。声明变量后，你可以在 SCSS 代码中的任何地方使用它们，只需在变量名前加上。通过这些指令，你可以编写更具表现力和可维护的样式。在SCSS（Sass的新语法，即Sassy CSS）中，在 SCSS 中声明变量时，需要在变量名前加上。
vue在css中使用@路径报错问题
zhufan2333的博客
10-12 2716
vue.config.js配置@不对style部分的css生效。css loader 会把把非根路径的url解释为。， 加~前缀才会解释成模块路径（~@代表根路径）。
sass中@的作用
weixin_30335353的博客
11-06 862
总结一下sass中用到@的地方. 1.继承@extend SASS允许一个选择器，继承另一个选择器。比如，现有class1： .class1 { 　　border: 1px solid #ddd; } class2要继承class1，就要使用@extend命令： .class2 { 　　@extend .class1; 　　font-size:120%; } ...
预处理器Sass/Scss、Less 的区别，项目中写法
最新发布
魏晋-
09-08 745
语法兼容性：Scss 和 Less 均兼容 CSS，新手可快速上手；若习惯缩进语法，可尝试原生 Sass（但不推荐，生态已边缘化）。功能丰富度：Sass > Less，尤其在「自定义函数、循环、条件判断」上，Sass 更适合复杂项目（如组件库开发）。生态与性能：Sass 生态更成熟（如 Vue 官方组件库用 Scss），dart-sass编译性能稳定；Less 更轻量，适合简单场景。选择建议大型项目、需复杂样式逻辑 → 优先Sass/Scss；中小型项目、追求轻量快速 → 可选Less；
sass-brunch插件：为Brunch添加Sass/Scss支持
当设置为 `'comments'` 时，Sass 编译器会在生成的 CSS 文件中插入源码行号注释，标明每条样式规则对应的原始 SCSS 文件及具体行数，便于开发者在浏览器开发者工具中快速定位问题。若设置为 `'debug'`，则会启用类似...
详解vue项目中如何引入全局sass/less变量、function、mixin
08-27
在 Vue 项目中，如何引入全局 Sass/Less 变量、函数、Mixin 是一个常见的问题。今天，我们将详细介绍如何使用 sass-resources-loader 将全局 Sass/Less 变量、函数、Mixin 引入 Vue 项目中。 首先，让我们考虑以下...
pd-gulp-sass-generator：简化SASS/SCSS的gulp任务构建工具
在这个示例中，首先注册了一个名为`myLib`的默认任务，它会处理`src`路径下的所有`.sass`和`.scss`文件，并将编译后的CSS输出到`dest`指定的目录。紧接着，定义了一个名为`customSass`的自定义任务，配置了一个`...
scss 文件里的特殊符号 @ 和 @include 的用法
2007 年 ~ 2025 年，深耕 SAP 技术 18 年
01-09 8119
Jerry 之前的文章.scss 文件里的特殊符号 - % 百分号和 $美元符号，介绍了 scss 文件里两个特殊符号，百分号 % 和美元符号 $ 的用法。 本文介绍另一个特殊符号 @ 的用法。 使用预处理器的优点之一是它们能够处理复杂、冗长的代码并对其进行简化。 这就是 mixins 派上用场的地方！ @mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius;
alias cli3 配置_vue全局设置scss,配置路径别名，以及border-image实践
weixin_34886207的博客
01-04 262
暂时研究不来了，明天吧这篇文章会用到以上两篇文章前端工程师：vue如何配置路径别名​zhuanlan.zhihu.com前端工程师：vue-cli3设置scss全局变量​zhuanlan.zhihu.com首先我们 来配置路径别名，以及设置全局变量const path = require('path'); function resolve(dir) { return path.join(__d...
scss中@import “xxx“和@import url(“xxx“)的区别
qq_42372534的博客
02-07 1045
不会，scss文件引入另一个scss文件并且想使用其中的变量，要用@import “xxx.scss”.会经过sass-loader处理，而。
设置Vue路径别名用于ts、js、scss、less
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
10-22 498
build/ webpack.base.conf.js文件加别名@components和css。
vscode引用scss时路径报错问题解决
偏执
07-19 437
这个问题之前困扰了很久 一直没找到好的解决方法 就搁置了，之前用的webstorm，转vscode以后才有了这个问题，webstrom使用的是自带的file watcher自动转css，所以不会有这个问题。window环境路径规则和sass语法不同。上面两个斜杠 一个是路径符一个是转移符。需要相对路径跳出外层的童鞋这么写!@import 路径。
vue中在scss中通过别名@的形式引入图片资源
coucouxie的博客
12-15 1120
如何在scss中通过别名引入图片资源 .back { background: url('@/assets/back/1.png') } 上面的写法是错误的，这样会报错 正确的写法应该如下 .back { background: url('~@/assets/back/1.png') } 至于为什么下面的写法才是正确的，好像是和css-loader相关的，后面再去探究。 ...
Webpack CSS/SCSS中url()无法正常解析解决方案
https://github.com/blingbling-110
08-11 1692
仅供参考 软件包版本： { "css-loader": "^6.2.0", "css-minimizer-webpack-plugin": "^3.0.1", "mini-css-extract-plugin": "^1.6.0", "sass": "^1.35.1", "sass-loader": "^12.1.0", "url-loader": "^4.1.1", "webpack": "^5.39.1", "webpack-cli": "
sass学习--sass的@规则（进阶篇）
macanfa的博客
06-23 5323
主要整理了@import、@media、@extend、@at-root、@debug、@warn、@error等@规则。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值