在Shopware 6中的scss中使用资产

问题描述

我无法在scss中插入图像作为背景图像。我的主题中的图片位于:custom/plugins/MyTheme/src/Resources/app/storefront/src/assets/img/my-image.png 我正在尝试在scss文件中使用此图像。当我使用./psh.phar storefront:build时,可以在店面中看到图像,但是当我使用./psh.phar storefront:hot-proxy时,会出现错误

This relative module was not found: * ../assets/img/my-image.png in ./node_modules/css-loader/dist/cjs.js??ref--8-1!./node_modules/postcss-loader/src??ref--8-2!./node_modules/sass-loader/lib/loader.js??ref--8-3!/app/var/theme-entry.scss

在scss中,我使用以下路径:background-image: url("../assets/img/my-image.png");

如何在scss中正确添加文件

解决方法

您需要将文件相对于主题CSS放置,然后直接从那里引用。就像“ images / abc.jpg”。

,

我认为您应该从论坛上尝试此解决方案 https://forum.shopware.com/discussion/70245/plugin-assets-in-scss-verlinken

在主题中,我创建了这个变量并像这样使用它

$bundle-path: '../../..//bundles/mybundle/';
$icon-chevron-right: url($bundle-path + '/assets/icon/chevron-right-xs.svg');

或者您可以像这样硬编码

$icon-chevron-right: url(/bundles/mytheme/assets/icon/chevron-right-xs.svg) !default;