CSS 中的 URL 不再适用于 Vaadin 14.6

问题描述

从 Vaadin 14.5 升级到 14.6 后，我遇到了包含指向内容的 URL 的 CSS 问题。

例如，以下 CSS 不再有效：

:host([part="my-part"]) [part="reveal-button"]::before {
    content: url("../images/my-image.svg");
}

在运行 Vaadin Maven 插件的构建前端目标时“编译”失败，并出现以下错误：

ERROR in ../node_modules/@vaadin/flow-frontend/styles/components/my-component.css
Module build Failed (from ../node_modules/css-loader/dist/cjs.js):
Error: Can't resolve '../images/my-image.svg' in '<Project Path>\node_modules\@vaadin\flow-frontend\styles\components'

如果我尝试运行该项目，浏览器中会出现同样的错误。此 CSS 在所有早期版本的 Vaadin 14 中都运行良好。

有没有人遇到过类似的事情，或者对可能导致这种情况的变化有什么想法？

解决方法

使用新的自定义主题功能，.css 加载器已从 raw-loader 更改为 css-loader，但它不应触及 frontend/themes/[theme-name] 或 node_modules 之外的网址

位于 styles/components/my-component.css、src/main/resources/META-INF/frontend 或 src/main/resources/META-INF/resources/frontend 的 src/main/resources/META-INF/resources 是否要打包为附加 jar 或兼容模式？

因为在这种情况下，css 最终会出现在 node_modules 中，这可能会对解析产生影响。

作为一种解决方法，如果您不构建附加组件，您应该能够将 css 和图像移动到 {project_root}/frontend 并且它应该可以正常构建。

在 14.6.2 发布之前，您可以将 raw-loader 依赖添加到 java 类中 @NpmPackage(value = "raw-loader",version = "3.1.0") 然后添加到 webpack.config.js 行

if(flowDefaults.module.rules[2].test.toString().includes('.css')) {
  flowDefaults.module.rules[2].use = [ {loader: 'raw-loader' }];
} else if(flowDefaults.module.rules[1].test.toString().includes('.css')) {
  flowDefaults.module.rules[1].use = [ {loader: 'raw-loader' }];
}

您是否更改了 css 结构以遵循 14.6 中引入的 new theme structure？它不是必需的，但它是重要的上下文。我认为这至少与您的问题有关。

您的错误消息中的路径似乎有点奇怪，最终出现在 node_modules 文件夹中。你能分享一下这个文件的位置，以及什么将文件加载到你的项目中吗？

使用新的主题结构，我使用以下 css 在 css 中导入图像：

  background: url('./images/fire.png');

然后放在一个文件中：frontend/themes/mythemename/mythemefile.css

vaadin-flow vaadin14