Vaadin从14升级到23，在哪里放置@cssimport
我使用了Vaadin 14 Business Starter应用程序，该应用似乎已在Vaadin 23中停止。此应用程序将自定义CSS放在Mainlayout下：
@CssImport(value = "./styles/components/charts.css", themeFor = "vaadin-chart", include = "vaadin-chart-default-theme")
@CssImport(value = "./styles/components/floating-action-button.css", themeFor = "vaadin-button")
@CssImport(value = "./styles/components/grid.css", themeFor = "vaadin-grid")
@CssImport("./styles/lumo/border-radius.css")
@CssImport("./styles/lumo/icon-size.css")
@CssImport("./styles/lumo/margin.css")
@CssImport("./styles/lumo/padding.css")
@CssImport("./styles/lumo/shadow.css")
@CssImport("./styles/lumo/spacing.css")
@CssImport("./styles/lumo/typography.css")
@CssImport("./styles/misc/box-shadow-borders.css")
@CssImport(value = "./styles/styles.css", include = "lumo-badge")
@JsModule("@vaadin/vaadin-lumo-styles/badge")
这是否留在这里，还是将其与@pwa和其他注释一起移至AppConfig。 我之所以问，是因为菜单上的CSS样式被打破了，并且似乎不会改变它在Mainlayout或AppConfig上。
有什么想法吗？这是14至23之间的样式不兼容，还是对@cssimport的位置更改的要求？
还有其他人成功地将已停产的业务启动应用程序从14到23移植？
Vaadin Fold的一些帮助将不胜感激，因为这个业务启动器应用程序明确销售了获取专业订阅的收益，现在似乎已经被删除了。
I used the Vaadin 14 business starter app which appears to have been discontinued in Vaadin 23. This app put custom CSS under the MainLayout:
@CssImport(value = "./styles/components/charts.css", themeFor = "vaadin-chart", include = "vaadin-chart-default-theme")
@CssImport(value = "./styles/components/floating-action-button.css", themeFor = "vaadin-button")
@CssImport(value = "./styles/components/grid.css", themeFor = "vaadin-grid")
@CssImport("./styles/lumo/border-radius.css")
@CssImport("./styles/lumo/icon-size.css")
@CssImport("./styles/lumo/margin.css")
@CssImport("./styles/lumo/padding.css")
@CssImport("./styles/lumo/shadow.css")
@CssImport("./styles/lumo/spacing.css")
@CssImport("./styles/lumo/typography.css")
@CssImport("./styles/misc/box-shadow-borders.css")
@CssImport(value = "./styles/styles.css", include = "lumo-badge")
@JsModule("@vaadin/vaadin-lumo-styles/badge")
Does this stay here or does it move to AppConfig along with the @PWA and other annotations.
I ask because the CSS styling is broken on the menu and doesn't seem to change wither it is on MainLayout or AppConfig.
Any ideas? Is this a styling incompatibility between 14 and 23, or have the requirements on where to place the @CssImport changed?
Has anyone else successfully ported the discontinued business starter app from 14 to 23?
Some help from the Vaadin folk would be appreciated as this business starter app was a explicitly marketed benefit to getting a Pro subscription and now appears to have been dropped.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
当前推荐的方法是使用自定义主题文件夹（例如（例如） ，
前端/主题/神话），然后将您的样式表放在那里。然后使用@theme（“ mytheme”）注释选择该主题。./ styles/styles.css文件可能是主要主题样式表（frontend/themes/mytheme/styles.css.css）。所有其他没有themefor属性的所有其他@cssimports可以在同一文件夹上，并在主样式表中使用标准CSS@Import导入。但是，由于Vaadin 23现在具有 lumo strieltion class ，您可能不需要那些其他样式表（例如，
Margin.css）。但是，他们定义的CSS类名称可能不是较新的实用程序类别的1：1。任何带有
themefor属性的@cssimports都应放置在“特殊”组件文件夹中，其中每个文件名与组件标签名称相对应（例如，fronandend /themes/my-theme/components/vaadin-chart.css）。The currently recommended way is to use the custom theme folder (for example,
frontend/themes/mytheme), and place your style sheets there. Then use the@Theme("mytheme")annotation to choose that theme.The
./styles/styles.cssfile should likely be the main theme style sheet (frontend/themes/mytheme/styles.css). All other @CssImports without athemeForattribute can be on the same folder, and imported in the main style sheet with the standard CSS@import.But, since Vaadin 23 now has the Lumo utility classes built-in, you might not need those additional style sheets (for example,
margin.css). Though, the CSS class names they define might not be 1:1 with the newer utility classes.Any @CssImports with the
themeForattribute should be placed in the “special”componentsfolder, where each file name corresponds to a component tag name (for example,frontend/themes/my-theme/components/vaadin-chart.css).有
@cssimport的迁移手册。但是有两件事要考虑（尽管被命名为“推荐更改”）...：
There's a migration manual for
@CssImportat https://vaadin.com/docs/latest/upgrading/recommended-changes in chapter "Refactor Styles to a Custom Theme Folder".But there are two things to consider (despite it is named "Recommended Changes")...: