文件结构
|-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 '~',指路
scss中引入img
引用public
引用 src ——》~@