【问题标题】:Compiling Bootstrap 5 sass in Vaadin 8 project fails在 Vaadin 8 项目中编译 Bootstrap 5 sass 失败
【发布时间】:2022-10-14 09:45:54
【问题描述】:

我想在我的 Vaadin 8 项目中使用Bootstrap 5 sass utilities(以帮助促进使用 flexbox 布局、响应式布局和编写自定义 css)。但是,当我包含 Bootstrap scss 文件时,在导入 Bootstrap _functions.scss 时会出现一般编译错误:

编译主题“VAADIN/themes/mytheme”失败(com.vaadin:vaadin-maven- 插件:8.14.3:编译主题:默认:生成资源)

在详细信息中,它只是说 com.vaadin.sass.SassCompiler “失败,状态为 1”。

当我从 _functions.scss 中删除代码并一点一点地添加回来时,它似乎在 mixin 定义的 @each 行中消失了。我假设这是因为 sass 编译器很旧?所以我的问题是:

  1. 是否有日志或其他东西可以让我看到编译 scss 时发生的实际错误?
  2. 如何在我的 Vaadin 8 项目中更新 sass 编译器?
  3. 是否有其他人在他们的 Vaadin 8 项目中成功编译了 bootstrap sass,如果是,如何编译?

    先感谢您。

    更新:

    我像这样注释掉了 compile-theme 行:

            <plugin>
                <groupId>com.vaadin</groupId>
                <artifactId>vaadin-maven-plugin</artifactId>
                <version>${vaadin.plugin.version}</version>
                 <configuration>
                    <theme>mytheme</theme>
                </configuration>
                <executions>
                    <execution>
                        <goals>
                            <goal>update-theme</goal>
                            <goal>update-widgetset</goal>
                            <goal>compile</goal>
                            <!-- 2022-10-13 Commenting out compile-theme and using sass-maven-plugin to compile modern sass instead -->
                            <!-- <goal>compile-theme</goal> --> 
                        </goals>
                    </execution>
                </executions>
            </plugin>
    

    并像这样添加了 sass-maven-plugin:

            <plugin>
                <groupId>nl.geodienstencentrum.maven</groupId>
                <artifactId>sass-maven-plugin</artifactId>
                <version>3.7.2</version>
                <configuration>
                    <resources>
                        <resource>
                            <source>
                                <directory>${basedir}/src/main/webapp/VAADIN/themes/mytheme/scss</directory>
                                <includes>
                                    <include>*.scss</include>
                                </includes>
                            </source>
                            <relativeOutputDirectory>..</relativeOutputDirectory>
                            <destination>${basedir}/src/main/webapp/VAADIN/themes/mytheme</destination>
                        </resource>
                    </resources>
                </configuration>
                <executions>
                    <execution>
                        <phase>generate-resources</phase>
                        <goals>
                            <goal>update-stylesheets</goal>
                        </goals>
                    </execution>
                </executions>
            </plugin>
    

    我必须将valo source code 复制到我的主题文件夹中(因为 Vaadin sass 编译器将其从 jar 中拉出),并将 Bootstrap 5 scss code 复制到我的主题文件夹中。现在我的 scss 似乎可以编译(耶!) 但每次我更改 scss 代码时,它似乎都会重新编译三次(如 Eclipse 控制台->Maven 控制台中所示):

    2022-10-13, 9:21:24 p.m. EDT: [WARN] The artifact xml-apis:xml-apis:jar:2.0.2 has been relocated to xml-apis:xml-apis:jar:1.0.b2
    2022-10-13, 9:21:24 p.m. EDT: [WARN] The POM for com.amazon.paapi:paapi5-java-sdk:jar:1.0.0 is missing, no dependency information available
    2022-10-13, 9:21:24 p.m. EDT: [INFO] Resolving P/newsys.orm: com.librarybound:newsys.orm:0.0.1-SNAPSHOT with classifier  to /newsys.orm/target/classes
    2022-10-13, 9:21:24 p.m. EDT: [INFO] Resolving P/cxfwebservices: com.librarybound:cxfwebservices:0.0.1-SNAPSHOT with classifier  to /cxfwebservices/target/classes
    2022-10-13, 9:21:24 p.m. EDT: [INFO] Updating theme VAADIN/themes/mytheme
    2022-10-13, 9:21:26 p.m. EDT: [INFO] Widgetsets found from classpath:
    2022-10-13, 9:21:26 p.m. EDT: [INFO]    org.tepi.imageviewer.WidgetSet in jar:file:C:/Users/Susan/.m2/repository/org/vaadin/addons/imageviewer/0.6.0.v8/imageviewer-0.6.0.v8.jar!/
    2022-10-13, 9:21:26 p.m. EDT: [INFO] Addon styles found from classpath:
    2022-10-13, 9:21:26 p.m. EDT: [INFO] 
    2022-10-13, 9:21:26 p.m. EDT: [INFO] Search took 38ms
    2022-10-13, 9:21:26 p.m. EDT: [INFO] Theme "VAADIN/themes/mytheme" updated
    2022-10-13, 9:21:26 p.m. EDT: [INFO] Checked 0 files for C:\dev\lbi\dev\git\newsys\web\src\main\sass
    2022-10-13, 9:21:26 p.m. EDT: [INFO] Checked 1 filtered (**/*.css) files for C:\dev\lbi\dev\git\newsys\web\target\web-1.0-SNAPSHOT\css
    2022-10-13, 9:21:26 p.m. EDT: [INFO] Compiling Sass templates
    2022-10-13, 9:21:26 p.m. EDT: [INFO] Queueing Sass template for compile: C:/dev/lbi/dev/git/newsys/web/src/main/webapp/VAADIN/themes/mytheme/scss => C:/dev/lbi/dev/git/newsys/web/src/main/webapp/VAADIN/themes/mytheme
    2022-10-13, 9:21:55 p.m. EDT: [INFO]     >> C:/dev/lbi/dev/git/newsys/web/src/main/webapp/VAADIN/themes/mytheme/scss/styles.scss => C:/dev/lbi/dev/git/newsys/web/src/main/webapp/VAADIN/themes/mytheme/styles.css
    2022-10-13, 9:21:55 p.m. EDT: [INFO] Using 'UTF-8' encoding to copy filtered resources.
    2022-10-13, 9:21:55 p.m. EDT: [INFO] Copying 0 resource
    2022-10-13, 9:21:55 p.m. EDT: [INFO] Using 'UTF-8' encoding to copy filtered resources.
    2022-10-13, 9:21:55 p.m. EDT: [INFO] skip non existing resourceDirectory C:\dev\lbi\dev\git\newsys\web\src\test\resources
    2022-10-13, 9:21:55 p.m. EDT: [INFO] Updating theme VAADIN/themes/mytheme
    2022-10-13, 9:21:57 p.m. EDT: [INFO] Widgetsets found from classpath:
    2022-10-13, 9:21:57 p.m. EDT: [INFO]    org.tepi.imageviewer.WidgetSet in jar:file:C:/Users/Susan/.m2/repository/org/vaadin/addons/imageviewer/0.6.0.v8/imageviewer-0.6.0.v8.jar!/
    2022-10-13, 9:21:57 p.m. EDT: [INFO] Addon styles found from classpath:
    2022-10-13, 9:21:57 p.m. EDT: [INFO] 
    2022-10-13, 9:21:57 p.m. EDT: [INFO] Search took 46ms
    2022-10-13, 9:21:58 p.m. EDT: [INFO] Theme "VAADIN/themes/mytheme" updated
    2022-10-13, 9:21:58 p.m. EDT: [WARN] GWT plugin is configured to detect modules, but none were found.
    2022-10-13, 9:21:58 p.m. EDT: [INFO] No widgetsets found - generating AppWidgetset if necessary.
    2022-10-13, 9:21:58 p.m. EDT: [INFO] Updating widgetset AppWidgetset
    2022-10-13, 9:21:58 p.m. EDT: [INFO] Adding resource directory to command classpath: C:\dev\lbi\dev\git\newsys\web\src\main\resources
    2022-10-13, 9:21:58 p.m. EDT: [INFO] Adding resource directory to command classpath: C:\dev\lbi\dev\git\newsys\web\target\generated-resources\gwt
    2022-10-13, 9:21:58 p.m. EDT: [INFO] Using com.vaadin:vaadin-client version 8.14.3
    2022-10-13, 9:21:58 p.m. EDT: [INFO] Using com.vaadin:vaadin-client-compiler version 8.14.3
    2022-10-13, 9:21:59 p.m. EDT: [INFO] Widgetsets found from classpath:
    2022-10-13, 9:21:59 p.m. EDT: [INFO]    org.tepi.imageviewer.WidgetSet in jar:file:C:/Users/Susan/.m2/repository/org/vaadin/addons/imageviewer/0.6.0.v8/imageviewer-0.6.0.v8.jar!/
    2022-10-13, 9:21:59 p.m. EDT: [INFO]    com.vaadin.DefaultWidgetSet in jar:file:C:/Users/Susan/.m2/repository/com/vaadin/vaadin-client/8.14.3/vaadin-client-8.14.3.jar!/
    2022-10-13, 9:21:59 p.m. EDT: [INFO] Addon styles found from classpath:
    2022-10-13, 9:21:59 p.m. EDT: [INFO] 
    2022-10-13, 9:21:59 p.m. EDT: [INFO] Search took 30ms
    2022-10-13, 9:21:59 p.m. EDT: [INFO] Checked 0 files for C:\dev\lbi\dev\git\newsys\web\src\main\sass
    2022-10-13, 9:21:59 p.m. EDT: [INFO] Checked 1 filtered (**/*.css) files for C:\dev\lbi\dev\git\newsys\web\target\web-1.0-SNAPSHOT\css
    2022-10-13, 9:21:59 p.m. EDT: [INFO] Compiling Sass templates
    2022-10-13, 9:21:59 p.m. EDT: [INFO] Queueing Sass template for compile: C:/dev/lbi/dev/git/newsys/web/src/main/webapp/VAADIN/themes/mytheme/scss => C:/dev/lbi/dev/git/newsys/web/src/main/webapp/VAADIN/themes/mytheme
    2022-10-13, 9:22:31 p.m. EDT: [INFO]     >> C:/dev/lbi/dev/git/newsys/web/src/main/webapp/VAADIN/themes/mytheme/scss/styles.scss => C:/dev/lbi/dev/git/newsys/web/src/main/webapp/VAADIN/themes/mytheme/styles.css
    2022-10-13, 9:22:31 p.m. EDT: [INFO] Using 'UTF-8' encoding to copy filtered resources.
    2022-10-13, 9:22:31 p.m. EDT: [INFO] Copying 1 resource
    2022-10-13, 9:22:31 p.m. EDT: [INFO] Copying 1 resource
    2022-10-13, 9:22:31 p.m. EDT: [INFO] auto discovered modules [AppWidgetset]
    2022-10-13, 9:22:31 p.m. EDT: [INFO] Using com.vaadin:vaadin-client version 8.14.3
    2022-10-13, 9:22:31 p.m. EDT: [INFO] Using com.vaadin:vaadin-client-compiler version 8.14.3
    2022-10-13, 9:22:31 p.m. EDT: [INFO] AppWidgetset is up to date. GWT compilation skipped
    2022-10-13, 9:22:31 p.m. EDT: [INFO] Using 'UTF-8' encoding to copy filtered resources.
    2022-10-13, 9:22:31 p.m. EDT: [INFO] skip non existing resourceDirectory C:\dev\lbi\dev\git\newsys\web\src\test\resources
    2022-10-13, 9:22:31 p.m. EDT: [INFO] Updating theme VAADIN/themes/mytheme
    2022-10-13, 9:22:33 p.m. EDT: [INFO] Widgetsets found from classpath:
    2022-10-13, 9:22:33 p.m. EDT: [INFO]    org.tepi.imageviewer.WidgetSet in jar:file:C:/Users/Susan/.m2/repository/org/vaadin/addons/imageviewer/0.6.0.v8/imageviewer-0.6.0.v8.jar!/
    2022-10-13, 9:22:33 p.m. EDT: [INFO] Addon styles found from classpath:
    2022-10-13, 9:22:33 p.m. EDT: [INFO] 
    2022-10-13, 9:22:33 p.m. EDT: [INFO] Search took 42ms
    2022-10-13, 9:22:33 p.m. EDT: [INFO] Theme "VAADIN/themes/mytheme" updated
    2022-10-13, 9:22:33 p.m. EDT: [WARN] GWT plugin is configured to detect modules, but none were found.
    2022-10-13, 9:22:33 p.m. EDT: [INFO] No widgetsets found - generating AppWidgetset if necessary.
    2022-10-13, 9:22:33 p.m. EDT: [INFO] Updating widgetset AppWidgetset
    2022-10-13, 9:22:33 p.m. EDT: [INFO] Adding resource directory to command classpath: C:\dev\lbi\dev\git\newsys\web\src\main\resources
    2022-10-13, 9:22:33 p.m. EDT: [INFO] Adding resource directory to command classpath: C:\dev\lbi\dev\git\newsys\web\target\generated-resources\gwt
    2022-10-13, 9:22:33 p.m. EDT: [INFO] Using com.vaadin:vaadin-client version 8.14.3
    2022-10-13, 9:22:33 p.m. EDT: [INFO] Using com.vaadin:vaadin-client-compiler version 8.14.3
    2022-10-13, 9:22:34 p.m. EDT: [INFO] Widgetsets found from classpath:
    2022-10-13, 9:22:34 p.m. EDT: [INFO]    org.tepi.imageviewer.WidgetSet in jar:file:C:/Users/Susan/.m2/repository/org/vaadin/addons/imageviewer/0.6.0.v8/imageviewer-0.6.0.v8.jar!/
    2022-10-13, 9:22:34 p.m. EDT: [INFO]    com.vaadin.DefaultWidgetSet in jar:file:C:/Users/Susan/.m2/repository/com/vaadin/vaadin-client/8.14.3/vaadin-client-8.14.3.jar!/
    2022-10-13, 9:22:34 p.m. EDT: [INFO] Addon styles found from classpath:
    2022-10-13, 9:22:34 p.m. EDT: [INFO] 
    2022-10-13, 9:22:34 p.m. EDT: [INFO] Search took 40ms
    2022-10-13, 9:22:34 p.m. EDT: [INFO] Checked 0 files for C:\dev\lbi\dev\git\newsys\web\src\main\sass
    2022-10-13, 9:22:34 p.m. EDT: [INFO] Checked 1 filtered (**/*.css) files for C:\dev\lbi\dev\git\newsys\web\target\web-1.0-SNAPSHOT\css
    2022-10-13, 9:22:34 p.m. EDT: [INFO] Compiling Sass templates
    2022-10-13, 9:22:34 p.m. EDT: [INFO] Queueing Sass template for compile: C:/dev/lbi/dev/git/newsys/web/src/main/webapp/VAADIN/themes/mytheme/scss => C:/dev/lbi/dev/git/newsys/web/src/main/webapp/VAADIN/themes/mytheme
    2022-10-13, 9:23:07 p.m. EDT: [INFO]     >> C:/dev/lbi/dev/git/newsys/web/src/main/webapp/VAADIN/themes/mytheme/scss/styles.scss => C:/dev/lbi/dev/git/newsys/web/src/main/webapp/VAADIN/themes/mytheme/styles.css
    2022-10-13, 9:23:07 p.m. EDT: [INFO] Using 'UTF-8' encoding to copy filtered resources.
    2022-10-13, 9:23:07 p.m. EDT: [INFO] Copying 1 resource
    2022-10-13, 9:23:07 p.m. EDT: [INFO] Copying 1 resource
    2022-10-13, 9:23:07 p.m. EDT: [INFO] auto discovered modules [AppWidgetset]
    2022-10-13, 9:23:07 p.m. EDT: [INFO] Using com.vaadin:vaadin-client version 8.14.3
    2022-10-13, 9:23:07 p.m. EDT: [INFO] Using com.vaadin:vaadin-client-compiler version 8.14.3
    2022-10-13, 9:23:07 p.m. EDT: [INFO] AppWidgetset is up to date. GWT compilation skipped
    2022-10-13, 9:23:07 p.m. EDT: [INFO] Using 'UTF-8' encoding to copy filtered resources.
    2022-10-13, 9:23:07 p.m. EDT: [INFO] skip non existing resourceDirectory C:\dev\lbi\dev\git\newsys\web\src\test\resources
    

    我这样做正确吗?每次更改 .scss 文件中的某些内容时,如何使它不重新编译三次?

【问题讨论】:

  • 请提供MRE
  • 不是解决方案;但我几年前尝试过,但失败了。 Vaadin sass 解析器无法处理它。

标签: sass vaadin bootstrap-5 vaadin8


【解决方案1】:

Vaadin 自己的编译器不支持 SASS 3。我建议添加 3rd 方 maven 插件来编译 SASS 文件。例如。 sass-maven-plugin 可以工作。

<groupId>nl.geodienstencentrum.maven</groupId>
<artifactId>sass-maven-plugin</artifactId>

您可以将其配置为在项目中使用您的主题位置

<configuration>
    <resources>
        <resource>
            <source>
                <directory>${basedir}/_themepath_</directory>
                <includes>
                    <include>*.scss</include>
                </includes>
            </source>
            <relativeOutputDirectory>..</relativeOutputDirectory>
            <destination>${basedir}/_themepath_</destination>
        </resource>
    </resources>
</configuration>

只需删除项目中 vaadin-plugin 中的 compile-theme 目标。

【讨论】: