Vaadin 14.6.1 - 错误: 无法解析 'lumo-css-framework/all-classes.css'

Question

我正在将一个 Vaadin Springboot/Gradle 应用从 Vaadin 14.5.1 迁移至 14.6.1 版本。我从start.vaadin.com生成的最新应用中，复制了主题文件夹中的新文件，特别是 frontend/themes/my-app/styles.css。

@import url('lumo-css-framework/all-classes.css');

当我运行vaadinBuildFrontend任务时，我会收到以下错误（深埋在其他信息中）:

ERROR in ./themes/my-app/styles.css
Module build failed (from ../node_modules/css-loader/dist/cjs.js):
Error: Can't resolve 'lumo-css-framework/all-classes.css' in '/Users/<..>/my-app/frontend/themes/my-app

所有构建依赖似乎与示例Maven项目中的相同。在构建前，已删除所有生成的文件。

比较生成的文件后，我发现示例Maven项目在生成的package.json文件中包含"lumo-css-framework": "^3.0.11"，而Gradle项目中没有。

环境：

• Spring 2.5.0
• Gradle 7.0.1
• Vaadin Gradle插件0.14.6.0
• macOS 11.2.3和Centos 7

我的设置缺少了什么？

- macnixde

Answer 1

你的项目缺少 lumo-css-framework npm 依赖项。你可以采取以下两种方法添加它：

1. npm install --save lumo-css-framework。这将把依赖项存储在 package.json 中，其中包含项目中需要的所有 npm 依赖项列表。虽然 Vaadin 主要是通过组件定义的 npm 依赖项填充 package.json，而不是自动生成它，但说是自动生成并不准确。任何在 package.json 中定义的其他依赖项都会被保留。

2. 在项目中的任何 Java 类上注释 @NpmDependency(value="lumo-css-framework", version="^3.0.11")。Vaadin 将使用此注释来确定项目需要哪些 npm 依赖项，然后基于该注释更新 package.json。

- Artur Signell

---

谢谢您的快速响应和建议。 运行npm install --save lumo-css-framework有效，直到执行gradle vaadinClean。 然后下一个构建将创建一个新的package.json。 因此，这不是一种可持续的方法。 添加@NpmPackage（value =“lumo-css-framework”，version =“^ 3.0.11”）像您建议的那样可以解决问题。 尽管如此，我仍然认为Vaadin应该自动解决这个问题，因为文档明确指出所有主题都基于Lumo。 无论如何，感谢您的建议！谢谢。 - macnixde

@macnixde - 使用Vaadin不需要lumo-css-framework。它们是一组实用的CSS类，主要供Fusion用户使用。通过start.vaadin.com生成的项目包括一些额外的帮助程序和自定义内容，这些内容不是框架的一部分，因此需要进行一些额外的迁移步骤，就像这样。 - Marcus Hellberg