vaadin-flow - CSS 中的 URL 在 Vaadin 14.6 中不再有效

Question

从 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 的所有先前版本中都运行良好。

是否有人遇到过类似的情况，或者对可能导致此问题的更改有任何想法？

Answer 1

通过新的自定义主题功能，.css 加载器已从 raw-loader 更改为 css-loader，但它不应触及 前端之外的网址/themes/[主题名称] 或 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' }];
}