weixin_39932479
2021-01-11 14:05 阅读 43

.vue文件中使用stylus的问题

vue+webpack环境下,在.vue文件中以<style lang="stylus">的方式使用stylus,但发现background url()属性不好使,背景图总是无法显示。目录结构如下:


/:
  main.html(主页)
  build.js(webpack打包出的js,main.html引用)
  /img(背景图所在文件夹)
  /components(.vue文件所在文件夹)
    a.vue(里面通过<style lang="stylus">引用img/下的一个图片文件)
尝试过:

background:url(img/a001bg.jpg)--编译报错“Cannot resolve 'file' or 'directory' ./img/a001bg.jpg”
background:url("img/a001bg.jpg")--编译报错,同上
background url("./img/a001bg.jpg")--编译报错,同上
background url(./img/a001bg.jpg)--编译报错,同上
background url("/img/a001bg.jpg")--编译未报错,firebug查看实际html中引用的路径是"/img/a001bg.jpg"
background url(/img/a001bg.jpg)--编译未报错,同上
项目package.json中的配置如下:

"devDependencies": {
"babel-core": "^6.10.4",
"babel-loader": "^6.2.4",
"babel-plugin-transform-runtime": "^6.9.0",
"babel-preset-es2015": "^6.9.0",
"babel-runtime": "^6.9.2",
"css-loader": "^0.23.1",
"file-loader": "^0.9.0",
"stylus-loader": "^1.4.0",
"url-loader": "^0.5.7",
"vue-hot-reload-api": "^1.3.3",
"vue-html-loader": "^1.2.3",
"vue-loader": "^8.5.3",
"vue-style-loader": "^1.0.0",
"webpack": "^1.13.1",
"webpack-dev-server": "^1.14.1"
},
"dependencies": {
"vue": "^1.0.26"
}
请问这个问题怎么解决?谢谢!!

该提问来源于开源项目:vuejs/vue-loader

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享

7条回答 默认 最新

  • weixin_39854867 weixin_39854867 2021-01-11 14:05

    background url(../img/a001bg.jpg)

    点赞 评论 复制链接分享
  • weixin_39875516 weixin_39875516 2021-01-11 14:05

    我也遇到类似的问题,如果是直接写在 style里还可以,如果是写一个单独的css文件,css文件的图片路径,居然是相对于引用这个css的文件的路径,才能正确编译,这存在一个问题,如果多个地方引用同一个CSS,那个这个路径怎么办??

    点赞 评论 复制链接分享
  • weixin_39875516 weixin_39875516 2021-01-11 14:05

    /: main.html(主页) build.js(webpack打包出的js,main.html引用) a.vue

    
    /css
         a.scss
                 div{background:('a.jpg')}
          a.jpg
    

    上页的写法会报错: 改成下面的就可以编译

    div{background:('css/a.jpg')}

    但是这个问题就在于,引用的位置不同 background路径就会不同,除了用 url("/css/a.jpg")外,有什么其他办法??

    点赞 评论 复制链接分享
  • weixin_39875516 weixin_39875516 2021-01-11 14:05

    换了直接在script 中 require('a.scss')方式可以

    点赞 评论 复制链接分享
  • weixin_39658318 weixin_39658318 2021-01-11 14:05

    问题统一关闭了,请用论坛。

    点赞 评论 复制链接分享
  • weixin_39939276 weixin_39939276 2021-01-11 14:05

    image

    点赞 评论 复制链接分享
  • weixin_39939276 weixin_39939276 2021-01-11 14:05

    我这是怎么了,求大神给解决下

    点赞 评论 复制链接分享

相关推荐