如何解决Vue使用Asset
我试图动态绑定背景图像,但是似乎在编译资产时遇到了麻烦。奇怪的是它可以工作,但不能同时工作。
我尝试了SO的各种解决方案,但没有任何方法可以消除编译错误(仍然会根据上图进行编译):
- Vue.js dynamic images not working
- VueJS v-bind:style for background-image: url()
- Vue.js data-bind style backgroundImage not working
- reference assets with generated style data bind
- Vue dynamic background image inline component
如何设置项目
Laravel Sanctum作为后端,Vue SPA作为前端,并利用Axios进行通信。
Topic.vue组件
<div
v-for="topic in topics"
:key="topic.id"
class="col-12 col-sm-6 col-lg-3 mb-4 d-flex justify-content-center"
>
<div
class="card-topic d-flex align-items-end"
:style="inlineBgImage(topic.src)"
>
<div class="card-topic__button py-3 text-center w-100">
<a href class="card-topic__link">{{ topic.title }}</a>
</div>
</div>
</div>
Topic.vue中的脚本
<script>
import { mapState } from 'vuex'
export default {
computed: {
...mapState('topic',['topics']),},created() {
this.$store.dispatch('topic/fetchTopics')
},methods: {
inlineBgImage(src) {
let bgImage = require('@/assets' + src)
return {
backgroundImage: `url("${bgImage}")`,}
},}
</script>
在inlineBgImage(src)
方法中,如果对需求进行硬编码(即let bgImage = require('@/assets/img/topic/myself.jpg')
),则可以成功应用背景图像。一旦我使用了src
值,它就坏了,但仍然可以工作(无法编译。页面出现)
资产
下面是资产文件夹结构
所有SCSS文件都导入到app.scss
,然后再导入到main.js
_variables.scss
“未定义变量” 存在存在
app.scss
这就是我将_variable.scss
文件导入app.scss
中的方式; @import 'variables.scss';
。导入先于其他文件。
我也尝试过:
-
@import 'variables';
-
@import '_variables';
-
@import '_variables.scss';
它仍然会显示错误。
终端中的错误详细信息
我要重申的是,如果我将bgImage
硬编码为例如,则不会出现这些错误。 require('@/assets/img/topic/myself.jpg')
。我不明白这些更改如何影响编译器。
ERROR Failed to compile with 6 errors 12:37:58 PM
error in ./src/assets/scss/card.scss
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable.
╷
16 │ background-color: $dark-blue;
│ ^^^^^^^^^^
╵
src\assets\scss\card.scss 16:23 root stylesheet
@ ./src/assets/scss/card.scss 4:14-233 14:3-18:5 15:22-241
@ ./src sync ^\.\/assets.*$
@ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Topic.vue?vue&type=script&lang=js&
@ ./src/views/Topic.vue?vue&type=script&lang=js&
@ ./src/views/Topic.vue
@ ./src/router/index.js
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://192.168.100.14:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js
error in ./src/assets/scss/search.scss
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable.
╷
27 │ color: $blue;
│ ^^^^^
╵
src\assets\scss\search.scss 27:12 root stylesheet
@ ./src/assets/scss/search.scss 4:14-235 14:3-18:5 15:22-243
@ ./src sync ^\.\/assets.*$
@ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Topic.vue?vue&type=script&lang=js&
@ ./src/views/Topic.vue?vue&type=script&lang=js&
@ ./src/views/Topic.vue
@ ./src/router/index.js
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://192.168.100.14:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js
error in ./src/assets/scss/image.scss
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable.
╷
33 │ color: $white;
│ ^^^^^^
╵
src\assets\scss\image.scss 33:12 root stylesheet
@ ./src/assets/scss/image.scss 4:14-234 14:3-18:5 15:22-242
@ ./src sync ^\.\/assets.*$
@ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Topic.vue?vue&type=script&lang=js&
@ ./src/views/Topic.vue?vue&type=script&lang=js&
@ ./src/views/Topic.vue
@ ./src/router/index.js
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://192.168.100.14:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js
error in ./src/assets/scss/button.scss
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable.
╷
2 │ color: $light-blue;
│ ^^^^^^^^^^^
╵
src\assets\scss\button.scss 2:12 root stylesheet
@ ./src/assets/scss/button.scss 4:14-235 14:3-18:5 15:22-243
@ ./src sync ^\.\/assets.*$
@ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Topic.vue?vue&type=script&lang=js&
@ ./src/views/Topic.vue?vue&type=script&lang=js&
@ ./src/views/Topic.vue
@ ./src/router/index.js
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://192.168.100.14:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js
error in ./src/assets/scss/header.scss
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable.
╷
4 │ background-color: $dark-blue;
│ ^^^^^^^^^^
╵
src\assets\scss\header.scss 4:23 root stylesheet
@ ./src/assets/scss/header.scss 4:14-235 14:3-18:5 15:22-243
@ ./src sync ^\.\/assets.*$
@ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Topic.vue?vue&type=script&lang=js&
@ ./src/views/Topic.vue?vue&type=script&lang=js&
@ ./src/views/Topic.vue
@ ./src/router/index.js
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://192.168.100.14:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js
error in ./src/assets/scss/nav.scss
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable.
╷
6 │ color: $light-blue;
│ ^^^^^^^^^^^
╵
src\assets\scss\nav.scss 6:12 root stylesheet
@ ./src/assets/scss/nav.scss 4:14-232 14:3-18:5 15:22-240
@ ./src sync ^\.\/assets.*$
@ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Topic.vue?vue&type=script&lang=js&
@ ./src/views/Topic.vue?vue&type=script&lang=js&
@ ./src/views/Topic.vue
@ ./src/router/index.js
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://192.168.100.14:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js
其他详细信息
topic.src
中的v-for="topic in topics"
将产生一个字符串,例如/img/topic/myself.jpg
。
解决方法
inlineBgImage(src) {
let fileExt = src.substring(src.lastIndexOf('.'))
src = src.replace('/img/','')
src = src.replace(fileExt,'')
let bgImage = require('@/assets/img/' + src + fileExt)
return {
backgroundImage: `url("${bgImage}")`,}
}
在forum.vuejs.org提出解决方案表示敬意。如Skirtle所述, Webpack对表达式和固定字符串参数的处理方式不同。我确实更改了解决方案,以防将来的文件具有不同的文件扩展名。您会在此处看到短裙的原始答案和解释。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。