CSS中的URL不再适用于Vaadin14.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@vaadinflow-frontendstylescomponents'
如果我尝试运行该项目，浏览器中会出现同样的错误。此 CSS 在所有先前版本的 Vaadin 14 中运行良好。
有没有人遇到过类似的事情，或者对可能导致这种情况的变化有什么想法？
回答
使用新的自定义主题功能，.css 加载程序已从 更改为raw-loader，css-loader但不应触及frontend/themes/[theme-name]或之外的 urlnode_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 发布之前，您可以将原始加载器依赖@NpmPackage(value = "raw-loader", version = "3.1.0")
项添加到java 类，
然后添加到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' }];
}