Vue2.0 import scss

336 阅读1分钟

文件结构

|-ProjectName
  |-build
  |-config
  |-src
  |  |-assets
  |  |  |-img
  |  |  |  |-left-top.png	----->这里
  |  |  |-scss
  |  |  |  |-common
  |  |  |  |  |-quota.scss  ----->这里 
  |  |-components
  |  |  |-Trend	
  |  |  |  |-edu.vue	----->这里

原本.vue文件中image引用路径
background-image: url('../../assets/img/left-top.png');

edu.vue

<style lang='scss' scoped>
@import '../../assets/scss/common/quota.scss'
或者
@import '@/assets/scss/common/quota.scss'

@import '/src/assets/scss/common/quota.scss'
和
@import '/assets/scss/common/quota.scss'
都不行
</style>

assets/scss/common/quota.scss

background-image: url('../../assets/img/left-top.png');
background-image: url('/assets/img/left-top.png'); 
和 
background-image: url('/src/assets/img/left-top.png');
虽然Image Preview能预览到图片,但网页上不显示
1)据说scss文件不像css文件,在```<style></style>```中引入时只能用@import而不能用@import url(),用@import url()测试后,莫名报格式问题,可能真的不行。
(2)无论在scss文件中,还是在.vue文件中<style></style>下使用@描述图片引用路径,都不可行,@只适用于引入文件路径。

关于@import '~',指路

segmentfault.com/q/101000001…

scss中引入img

引用public
引用 src ——》~@