在 Vaadin 8 项目中编译 Bootstrap 5 sass 失败答案

【问题标题】：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 编译器很旧？所以我的问题是：

是否有日志或其他东西可以让我看到编译 scss 时发生的实际错误？
如何在我的 Vaadin 8 项目中更新 sass 编译器？

是否有其他人在他们的 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 目标。

【讨论】：