我试图将某些组件scss文件与其Vue组件分开。同时我还包括一个不会作用域的GLOBAL scss文件。无论我使用哪个文件，我都无法正确解析/ assets或/ static映像路径。
我的nuxt.config.js示例：
module.exports = {
css: [
// SCSS file in the project
'@/assets/scss/base.scss'
],
}
在我的个人视图文件中，我以这种方式导入组件scss文件：
<style lang="scss">
@import "../assets/scss/pages/home";
</style>
无论我加载哪种方式，我都无法在scss中解析以下路径：
.myClass {
background-image: url('~assets/img/my-image.jpg');
}
OR
.myClass {
background-image: url('~static/img/my-image.jpg');
}
OR
.myClass {
background-image: url('/img/my-image.jpg');
}
所有这些都以404结束。我在这个问题上惹恼了我的脑子。为了测试，资产在/ static和/ assets中都有。
关于我可能做错的任何想法？
答案 0 :(得分：3)
这在资产情况下对我有用：
.myClass {
background-image: url('~@/assets/img/my-image.jpg');
}
答案 1 :(得分：0)
虽然我无法解决CSS中的问题，但可以通过直接在元素上设置if(pattern.name == 'Maintain Aspect') {
var ih = obj.getOriginalSize().height;
var iw = obj.getOriginalSize().width;
var cw = obj.width;
var ch = obj.height;
var width_ratio = cw / iw;
var height_ratio = ch / ih;
var fw,fh;
if (width_ratio > height_ratio) {
fw = iw * width_ratio;
fh = ih*fw/iw;
} else {
fh = ih * height_ratio;
fw = iw*fh/ih;
}
obj.width = fw;
obj.height = fh;
canvas.renderAll();
} else if(pattern.name == 'Exact Fit') {
obj.width = (40/100)*canvas.width;
obj.height = (40/100)*canvas.height;
obj.scaleX = 1;
canvas.renderAll();
}
属性来使它正常工作
style就我而言，我导入了图像并将其传递到:style="{'background-image': `url(${backgroundLocation})`}
中的模板中。这意味着data解析为backgroundLocation之类的东西。然后，您需要添加/_nuxt/img/.... CSS函数。