vue scss公共模块image图片地址使用变量方式

最新推荐文章于 2025-03-17 17:12:36 发布

转载最新推荐文章于 2025-03-17 17:12:36 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/undefined-h/p/8399386.html

文章标签：

#javascript #webpack #ViewUI

本文介绍了如何在SCSS文件中定义和使用变量，并在Vue组件中引用这些变量来设置背景图片路径。通过实例展示了如何在config.scss文件中定义目录变量并在App.vue中使用。

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

在config.scss文件中定义变量：

// config.scss
$dir: '../web-common';
$loginDir: '../../../web-common';

在App.vue中引入config.scss:

@import './styles/config.scss';
@import '../web-common/styles/common';

使用：

background:url(#{$dir}/styles/svg/topbar-quick-create.svg) no-repeat;

转载于:https://www.cnblogs.com/undefined-h/p/8399386.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_30633405

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

vue+scss全局使用mixin方法

周家大小姐

11-03

2213

先自行安装scss 或者安装如下1.0版也可 npm install sass-loader@10.1.1 --save-dev npm install node-sass --sava-dev 想要在vue-cli中全局使用 scss的全局变量和 @mixin样式混入，需要安装插件，然后在 vue.conf.js 中配置 npm install style-resources-loader vue-cli-plugin-style-resources-loader --save-dev vue.

关于vue打包后scss文件中背景图片不显示问题

raik520的博客

11-17

869

关于vue打包后scss文件中背景图片不显示问题build/utils build/utils 约47行 if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, publicPath: '../../', // 添加这行 fallback: 'vue-style-loader' }) } else { return ['vue-

参与评论您还未登录，请先登录后发表或查看评论

less scss 图片路径变量

愚人码头的博客

12-25

195

scss <style scoped lang="scss"> $ImgPath: "@/assets/img/"; .notFind { background: url(#{$ImgPath}404.jpg) center center no...

less scss 图片路径变量

金大大的博客

10-15

4774

less <style scoped lang="less"> @imgurl: "./images/"; .container { width: 100%; height: 100%; background: url("@{imgurl}background.jpg") no-repeat center; background-size: cover; } &l...

vue项目中使用scss

weixin_45665171的博客

03-29

2万+

vue项目中安装、引入、使用scss

Vue -- 在Vue中使用scss

bobobocai的博客

07-31

3448

vue在scss中引入js变量动态改变背景图片

weixin_42247414的博客

06-28

3168

vue在scss中引入js变量动态改变背景图片

vue scss

最新发布

03-19

### 如何在Vue项目中使用SCSS并解决相关配置问题 #### 配置SCSS支持为了使Vue项目能够正常解析和编译SCSS文件，需要安装必要的依赖包。以下是具体的实现方法： 1. 安装 `node-sass` 和 `sass-loader`（对于 Vue 2...

解决在vue项目中,发版之后,背景图片报错,路径不对的问题

08-27

解决Vue项目发布后背景图片加载失败的问题，关键在于理解生产环境和开发环境下的资源路径差异，并通过设置正确的公共路径或使用绝对路径来确保资源能够被正确加载。通过以上的方法，你可以避免因路径问题导致的背景...

【Uniapp】uniapp微信小程序定义图片地址全局变量

cnsv的博客

06-06

873

uniapp微信小程序定义全局变量，全局使用图片地址路径

uniapp scss 背景图片设置线上地址

FUFCY的博客

05-13

1732

在uni.scss定义（自定义名称）$imgUrl:'https:/img/'（线上地址）; 然后使用background:url(#{$imgUrl}launch_bg.png) no-repeat;

vue3和vue2 使用css变量的方法（附带scss的使用方式）

柑橘乌云_

05-06

1万+

通过内联样式写css变量（可以调用js里面的变量），如何在style标签里面就可以使用css变量。这么写在 scss 是会编译报错的。建议写成第二种这种计算属性的方式，当值发生改变，也可以响应变化。直接在style标签里面使用v-bind绑定js里面的变量。会将双引号自动去掉，从而得到。，解决了编译失败的问题。

在原生CSS中使用变量

一碗周

08-06

4268

Hello 大家好，我是彼岸繁華????，一个想进大厂的大三学生，为了有一个完整的前端知识体系，现在我要从头开始学习、梳理、总结。编写不易转载请获得允许写在前面在CSS中使用变量并不是一个稀罕事，早在2007年Sass的诞生，就可以通过预处理的方式去处理变量，相继的又出现了Less和Stylus预处理器。原生CSS直到CSS3的推出，才出现了变量（又称为自定义属性）的概念，现在我们就来学习一下。基本用法原生CSS定义变量，变量名需要使用两个减号--开始，其值可以是任何有效的CSS值。定

vue项目sass中图片路径引用方式说明

JackieDYH的博客

06-28

1530

vue template中可以使用根路径加载图片 <img :src="require('@/assets/img/logo.svg')" /> scss中是不能这样写的 css loader会把非根路径的url解析为相对路径……但是又不能写成根路径/（不转译）,因为没有 scss中的图片能不能从根路径加载呢？也就是说，背景图片的样式可以这么写（template中同样适用） background: url("~@/assets/img/footer.jpg..

Vue 组件间的通信(1)

2401_84436058的博客

04-29

718

父组件向子组件传递数据。：自定义事件。：插槽分发内容，带上标签数据一起传输，主要是父组件想子组件传输。组件间通信规则。

lang=“scss“动态拼接变量设置背景图

yangwq的博客

03-03

6052

HTML <div :class="['header', `header${num}`]"></div> data() { return { num: this.$route.query.num % 3 || 1, } }, CSS <style lang="scss" scoped> $imgName: 1, 2, 3; %bgr { background-repeat: no-repeat; background-size: 10..

scss全局变量的使用（包含基础变量、图片前缀变量）

2301_78881761的博客

03-17

217

uni.scss或自定义scss变量文件。在页面的scss文件中使用。

Scss 基本使用（变量、嵌套）