Style not loaded #103
Comments
|
An another little information. {
"productionMode": false,
"useDeprecatedV14Bootstrapping": false,
"eagerServerLoad": false,
"enableDevServer": false,
"chunks": {
"fallback": {
"jsModules": [
"@vaadin/vaadin-split-layout/src/vaadin-split-layout.js",
"@vaadin/vaadin-radio-button/src/vaadin-radio-group.js",
"@vaadin/vaadin-text-field/src/vaadin-number-field.js",
"./menubarConnector.js",
"@vaadin/vaadin-menu-bar/src/vaadin-menu-bar.js",
"@vaadin/vaadin-login/src/vaadin-login-overlay.js",
"@vaadin/vaadin-form-layout/src/vaadin-form-item.js",
"@vaadin/vaadin-item/src/vaadin-item.js",
"@vaadin/vaadin-notification/src/vaadin-notification.js",
"@vaadin/vaadin-list-box/src/vaadin-list-box.js",
"@vaadin/vaadin-upload/src/vaadin-upload.js",
"@vaadin/vaadin-dialog/src/vaadin-dialog.js",
"@vaadin/vaadin-form-layout/src/vaadin-form-layout.js",
"./com/github/appreciated/grid-layout/grid-layout.js",
"@polymer/iron-list/iron-list.js",
"./ironListConnector.js",
"./ironListStyles.js",
"@vaadin/vaadin-radio-button/src/vaadin-radio-button.js",
"./client-media-query.js",
"@vaadin/vaadin-checkbox/src/vaadin-checkbox-group.js",
"@vaadin/vaadin-custom-field/src/vaadin-custom-field.js",
"@vaadin/vaadin-progress-bar/src/vaadin-progress-bar.js",
"@vaadin/vaadin-upload/src/vaadin-upload-file.js",
"@vaadin/vaadin-details/src/vaadin-details.js",
"@vaadin/vaadin-text-field/src/vaadin-text-area.js",
"./vaadin-big-decimal-field.js",
"@polymer/iron-icon/iron-icon.js",
"@vaadin/vaadin-ordered-layout/vaadin-scroller.js",
"@vaadin/vaadin-avatar/src/vaadin-avatar-group.js",
"@vaadin/vaadin-text-field/src/vaadin-password-field.js",
"@vaadin/vaadin-select/src/vaadin-select.js",
"@vaadin/vaadin-login/src/vaadin-login-form.js",
"./element-media-query.js",
"./selectConnector.js",
"@vaadin/vaadin-text-field/src/vaadin-integer-field.js",
"@vaadin/vaadin-accordion/src/vaadin-accordion.js",
"@vaadin/vaadin-combo-box/src/vaadin-combo-box.js",
"./custom-media-query.js",
"@vaadin/vaadin-grid/src/vaadin-grid-tree-toggle.js",
"./comboBoxConnector.js",
"@vaadin/vaadin-text-field/src/vaadin-email-field.js",
"@vaadin/vaadin-avatar/src/vaadin-avatar.js"
],
"cssImports": [
{
"value": "./styles/main.css"
}
]
}
}
}This should be correct... Regards, |
|
An another info.... According to the error message: the problem should be in addCssBlock('<custom-style><style include="lumo-color lumo-typography"></style></custom-style>', true);
document.documentElement.setAttribute('theme', 'dark');
import $css_0 from 'Frontend/styles/main.css';
addCssBlock(`<custom-style><style>${$css_0}</style></custom-style>`);Sorry but I am not a javascript guy and I can't understand what Thanks, |
|
I think I found something really interesting.... "devDependencies": {
"compression-webpack-plugin": "4.0.1",
"webpack-cli": "3.3.11",
"script-ext-html-webpack-plugin": "2.1.4",
"validator": "12.0.0",
"awesome-typescript-loader": "5.2.1",
"lit-html": "1.2.1",
"@types/validator": "10.11.3",
"lit-element": "2.3.1",
"webpack": "4.42.0",
"html-webpack-plugin": "3.2.0",
"chokidar": "^3.4.0",
"typescript": "3.8.3",
"webpack-merge": "4.2.2",
"webpack-dev-server": "3.10.3",
"css-loader": "4.2.1",
"lit-css-loader": "0.0.4",
"extract-loader": "5.1.0",
"raw-loader": "4.0.0",
"copy-webpack-plugin": "5.1.1"
}And the but when I start the app for example with gradle run or with Visual Studio Code debug run, the file change !!!!! "devDependencies": {
"compression-webpack-plugin": "4.0.1",
"webpack-cli": "3.3.11",
"script-ext-html-webpack-plugin": "2.1.4",
"validator": "13.1.17",
"awesome-typescript-loader": "5.2.1",
"lit-html": "1.2.1",
"@types/validator": "13.1.0",
"lit-element": "2.3.1",
"webpack": "4.42.0",
"html-webpack-plugin": "3.2.0",
"chokidar": "^3.5.0",
"typescript": "4.0.3",
"webpack-merge": "4.2.2",
"webpack-dev-server": "3.11.0",
"css-loader": "4.2.1",
"lit-css-loader": "0.0.4",
"extract-loader": "5.1.0"
}And a lot of packages are different in version and the Why the Sorry to bother you but I am looking to solve this problem by more or less a week !!! Regards, |
|
Hi, apologies but I'm on a vacation right now and will come back at the end of next week. The best way to get help is to ask on Vaadin forums or on vaadin chat. |
|
ok, thanks for the reply. I will try to figure out something by myself. I have already ask for help of Discorg but they pointed me to you :-) thanks, |
|
Well to be honest I'm not much of a javascript guy myself. I've basically took the Maven plugin code and converted it to Gradle, but I don't have a complete understanding of what's going on behind the scenes. I think meanwhile the best course of action would be to convert the example app to Maven to see whether the bug can be reproduced. I'll also take a look after I return, perhaps I Will be able to spot something. |
|
It's a regression of the 18.0.6 !!!! Basically, with the 18.0.6 version running gradle Regards, P.S. happy holiday ! |
|
As indicated here: https://github.com/vaadin/flow/pull/8843/files the raw-loader in 18.0.6 should not used anymore, but it seems that in some way is still requested for loading css. Regards, |
|
Perfect, thank you :) I'll leave this bug open and await the resolution of the upstream |
mvysny
added
blocked by upstream
|
Hey, |
|
OK, @Viewport("width=device-width, initial-scale=1")
@PageTitle("Web Analysis User Interface")
@BodySize(height = "100vh", width = "100vw")
@Meta(name = "Stefano Bossi", content = "PLC Web Analysis GUI")
@Push(value = PushMode.MANUAL, transport = Transport.WEBSOCKET_XHR)
@Theme(value = Lumo.class, variant = Lumo.DARK)
@CssImport("./styles/main.css")
@CssImport("./styles/main/main-view.css")
public class MainBoard extends AppLayout implements AppShellConfigurator{
...
...
}Here the So to recap, this doesn't work in Production but ONLY in development: @Viewport("width=device-width, initial-scale=1")
@PageTitle("Web Analysis GUI")
@BodySize(height = "100vh", width = "100vw")
@Meta(name = "Stefano Bossi", content = "PLC Web Analysis GUI")
@Push(value = PushMode.MANUAL, transport = Transport.WEBSOCKET_XHR)
@Theme(value = Lumo.class, variant = Lumo.DARK)
@CssImport("./styles/main.css")
public class AppShell implements AppShellConfigurator {
...
...
}This is really strange to me.... Regards, |
|
Yes, exactly the same in my app. In development mode works ok in production doesn't work. `@Theme(CustomTheme.class) }` |
I don't think there's an issue upstream. Afaik this issue does not happen with Maven. To me it looks like the issue is only caused by |
|
Unfortunately the Vaadin Gradle plugin doesn't currently support Vaadin 18+ fully. However, we're working on an official support for Vaadin 20+ (and also possibly Vaadin 19) - please follow the progress at #100 . I'll therefore close this issue; once the new plugin is released, please migrate your project to Vaadin 19 and please try again. |
Desktop (please complete the following information):
Describe the bug
I am trying to use Vaadin 18 and styling the app with my css.
I have pushed a sample application on my github here: https://github.com/foxpluto/testvaadintheme
A very easy app with a Dark Theme and a simple css in the
/frontend/style/main.cssdirectory.I have read this documentation page: importing-dependencies and according to the table at the end of the page the place should be correct.
Starting the app I have an error:
I can't really figure out where I have to put the
main.cssto be found by@CssImport("./styles/main.css")The
main.cssshouldn't be automatically be inserted in the bundle stuff?Where is the right place?
Thanks for your help.
Stefano Bossi
Additional context
I am using Visual Studio Code
The text was updated successfully, but these errors were encountered: