vue cli4 项目内 scss样式表里添加背景图的路径问题

最新推荐文章于 2024-08-12 08:30:00 发布

灬ManongLai

最新推荐文章于 2024-08-12 08:30:00 发布

阅读量2k

点赞数 3

分类专栏： node html+css javascript 文章标签： vue less node.js vue.js es6

本文链接：https://blog.csdn.net/qq_39453402/article/details/107205756

版权

javascript 同时被 3 个专栏收录

58 篇文章 0 订阅

订阅专栏

html+css

23 篇文章 0 订阅

订阅专栏

node

18 篇文章 0 订阅

订阅专栏

在APP.vue里引用

<style lang="scss">
    @import '~@/assets/css/style.scss';
</style>

文件内的带有背景图的样式写法

&.icon-box07{background: url(~@/assets/img/img-sysm-icon-07.png) no-repeat center;}

不用添加任何配置文件

以上的 ~ 是借助webpack的前缀
以上的 @ 是vue里webpack默认的项目代号，指向路径为项目的src文件夹

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

灬ManongLai

关注关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

在vue-cli中安装scss

吴小花的博客

03-16

2675

1.步骤一：安装node-sass、sass-loader、style-loader cnpm install node-sass --save-dev cnpm install sass-loader --save-dev cnpm install style-loader --save-dev 步骤二：安装sass-resources-loade...

vue项目分析--vue.use()&&vue路由的使用&&scss文件

weixin_46045444的博客

10-11

298

vue.use的使用 vue.use是可以引入别人的vue组件一些没有install的组件可以不用vue.use就直接使用，比如axios 可以自己定义一个需要vue.use（有install）的组件 <template> <div class="loading-box"> Loading... </div> </template> 可以自己先新建一个component文件夹，下面一个loading文件夹，里面写一个inde

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

Vuejs style lang="scss" 样式里写背景图片路径

yjxfox的专栏

05-29

6313

主要是在引入背景图片的前面加入“ ~@/assets/ ” <style lang="scss"> div{ height:600px; background-size:100%; background-repeat:no-repeat; background-position:center top; ...

【vue】scss引用图片写法

最新发布

weixin_47351913的博客

08-12

554

在SCSS（Sass）中，获取图片的方式与普通的CSS非常相似，但SCSS提供了更多的灵活性，比如变量和混合等内容。这里的 'images/example.jpg' 是一个相对路径，它从当前SCSS文件所在目录开始查找 images 文件夹下的 example.jpg 文件。如果你使用的是 Sass 的某个版本，可能需要借助于一些工具函数来处理路径。Sass 提供了一些内置函数，可以帮助处理路径问题。你可以在SCSS中定义变量来存储路径，这样可以更容易地维护和更改路径。5. 使用Sass的内置函数。

背景图片动态绑定

qq_43483403的博客

12-03

320

:style="{ backgroundImage: 'url(' + staticUrl + '/manage/bank/icon_otherside/' + item.icon + ')', backgroundPosition: '106% 40px', backgroundRepeat: 'no-repeat', backgroundSize: '80px 80px', }"

在vue项目中使用scss

WeiflR10的博客

01-08

199

一、安装 npm install sass-loader --save-dev npm install node-sass --sava-dev 二、在build文件夹下的webpack.base.conf.js的rules里面添加配置 { test: /\.scss$/, loaders: ['style', 'css', 'sass'] } 三、使用 <style s...

vue全局配置scss，在vue文件使用scss

是清伊呀丶的博客

02-18

893

下面是对scss文件的配置 1.安装sass-resources-loader npm i sass-resources-loader --save-dev 2.修改build文件夹下utils.js，下面的options路径就是你要配置的scss文件的绝对路径 // https://vue-loader.vuejs.org/en/configurations/extract-css.html return { css: generateLoaders(), postcss: gener

vue-cli4 scss安装使用

weixin_43856797的博客

04-21

2616

今天新建一个cli4的项目，安装scss时总是报错，百度各种也没有解决，最终clone了一个成型的项目install了一下，发现竟然能正常使用scss，一步步拍错最终完成了安装，分享一下我遇到的错误。项目版本 "devDependencies": { "@vue/cli-plugin-babel": "~4.5.0", "@vue/cli-plugin-eslint": "~4.5.0", "@vue/cli-service": "~4.5.0", "babel-eslin

在 vue-cli v3.0 中使用 SCSS/SASS的方法

08-27

在 Vue-cli V3.0 中使用 SCSS/SASS 的方法在 Vue-cli V3.0 中使用 SCSS/SASS 是一个非常重要的知识点，下面我们将详细介绍如何在 Vue-cli V3.0 中使用 SCSS/SASS。首先，在使用 Vue-cli 生成项目时，需要勾选 ...

Vue CLI3搭建的项目中路径相关问题的解决

12-12

最近在试水 Vue CLI 3，并且尝试配置一个多页面（多应用）项目出来，期间又遇到各种路径问题，于是…于是有了下面的唠叨。以下都是基于 Vue CLI 3 来举例说明的，使用 2.x 版本的其实也类似首先，参考官方文档...

vue vuecli3.0 使用 scss-loader,设置全局scss变量

萌新不会永远是萌新的博客

09-21

2851

首先上代码，使用loaderOptions const outputDir = process.env.NODE_ENV == "development" ? "dist-test" : "dist"; module.exports = { css: { loaderOptions: { sass: { prependData: `@import "@/scss/default.scss";` } } }, configureWebpack

vue项目中使用scss的方法步骤

10-16

主要介绍了vue项目中使用scss的方法步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

Vue中使用 Scss 实现配置、切换主题

明天也要努力的博客

10-20

2923

本项目中的公共样式文件均位于 src/assets/css 目录下，其中 index.scss是总的样式文件的汇总入口，common.scss 是供全局使用的一些基本样式(常量）， _theme.scss、_handle.scss 两个文件是进行主题颜色配置的文件。如下图，将 index.scss 在 main.js 文件中引入即可全局使用。

scss background: url（）路径无效问题

jack_rose_me的博客

04-08

4813

@import "../style/lines.scss" 导致background: url（）路径无效问题解决方案是在webpack中的vue.config.js中配置 configureWebpack: config => { let obj = {}; obj.resolve = { alias: { 'img': '@/assets/img', } }; return obj } 然后在lines.scss中...

vue中在scss中通过别名@的形式引入图片资源

coucouxie的博客

12-15

987

如何在scss中通过别名引入图片资源 .back { background: url('@/assets/back/1.png') } 上面的写法是错误的，这样会报错正确的写法应该如下 .back { background: url('~@/assets/back/1.png') } 至于为什么下面的写法才是正确的，好像是和css-loader相关的，后面再去探究。 ...

vue设置页面背景及背景图片

热门推荐

u013302168的博客

11-29

1万+

【代码】vue设置页面背景及背景图片。

sass中url加载找不到路径报错问题

Maha

07-10

3445

关于sass中url加载找不到路径报错问题场景描述：当你的index.scss中@import了其他scss文件（eg:a.scss），如果a.scss里使用了url(),且里面的路径时相对路径，那么在sass-loader处理过后给css-loader处理时就会报错，找不到url路径资源。原因：当sass-loader处理时，会将index.scss里的a.scss合并，最后只输出index.scss，这个时候a.scss中的url()本来是以a.scss写的相对路径在合并的过程中又没有对

webpack处理(处理css/less/scss/url(图片)/字体文件)

sxs7970的博客

03-23

1823

注意：webpack 默认只能打包处理 JS 类型的文件，无法处理其他的非 JS 类型的文件；如果要处理非 JS 类型的文件，我们需要手动去安装一些合适的第三方 loader 加载器； 1.如果想要打包处理 css 文件，需要安装 npm i style-loader css-loader -D 2.打开webpack.config.js 这个配置文件，在里边，有一个配置节点，就是 m...

在Vue3中引入全局SCSS变量的方法

莫诺库诺的博客

09-24

6657

在实际项目中，各种样式往往有很多重复的情况，为了能够使样式的后续开发和维护更加惬意，将这些共同的代码进行命名然后调用这些变量是一个很好的选择。此文介绍如何在Vue3项目中全局引入在Scss文件中定义的样式变量。

Vue CLI3项目路径问题详解与解决

在Vue CLI3搭建的项目中，路径问题经常困扰开发者。这篇分享主要探讨了如何有效地处理这些路径问题，为开发者提供参考。Vue CLI3是一个强大的脚手架工具，用于快速初始化Vue.js项目，但在配置多页面或多应用项目时，...