URL in CSS 在 Vaadin 14.6 中不再有效

Question

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

例如，以下 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 的所有先前版本中都运行良好。

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

Answer 1

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

您的错误消息中的路径似乎有点奇怪，最终位于 node_modules 文件夹中。您能否分享此文件所在的位置，以及将文件加载到您的项目中的原因？

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

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

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

Answer 2

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

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

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

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

在 14.6.2 发布之前，您可以将 raw-loader 依赖项添加到 java class 中 @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' }];
}

URL in CSS 在 Vaadin 14.6 中不再有效

URL in CSS no longer works in Vaadin 14.6

vaadin-flow

vaadin14