如何在Spring Boot+Thymeleaf项目中用sass-maven-plugin自定义Bootstrap WebJar主题

1. 项目结构调整与自定义SCSS文件创建 #

在项目的src/main/resources/static目录下新建scss文件夹，创建custom.scss文件——这是你自定义Bootstrap变量的核心文件。

关键规则：Bootstrap的SCSS变量都带有!default标记，只要你在导入Bootstrap核心SCSS前定义同名变量，就能覆盖默认值。文件结构必须遵循「先定义变量，再导入Bootstrap」的顺序：

// 自定义Bootstrap变量
$primary: #2563eb;       // 替换默认蓝色主题色
$secondary: #6b7280;     // 替换次要配色
$success: #10b981;       // 替换成功状态颜色

// 导入Bootstrap核心SCSS（WebJar中的文件）
@import "bootstrap";

2. 配置sass-maven-plugin到pom.xml #

在pom.xml的<build><plugins>节点下添加Sass编译插件，指定源文件路径、输出路径，以及Bootstrap WebJar的SCSS加载路径：

<plugin>
    <groupId>com.github.warmuuh</groupId>
    <artifactId>sass-maven-plugin</artifactId>
    <version>3.2.1</version> <!-- 使用稳定版本 -->
    <executions>
        <execution>
            <phase>compile</phase> <!-- 绑定到Maven编译阶段自动执行 -->
            <goals>
                <goal>compile</goal>
            </goals>
        </execution>
    </executions>
    <configuration>
        <sourceDirectory>${project.basedir}/src/main/resources/static/scss</sourceDirectory>
        <outputDirectory>${project.build.directory}/classes/static/css</outputDirectory>
        <style>compressed</style> <!-- 输出压缩后的CSS，可选nested/expanded/compressed -->
        <!-- 配置Sass加载路径，指向WebJar中的Bootstrap SCSS目录 -->
        <loadPaths>
            <loadPath>${project.build.directory}/dependency/META-INF/resources/webjars/bootstrap/${bootstrap.version}/scss</loadPath>
        </loadPaths>
    </configuration>
    <!-- 依赖Bootstrap WebJar，确保插件能找到SCSS文件 -->
    <dependencies>
        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>bootstrap</artifactId>
            <version>${bootstrap.version}</version> <!-- 与项目中Bootstrap版本一致 -->
        </dependency>
    </dependencies>
</plugin>

补充：确保pom.xml中已声明Bootstrap WebJar依赖，版本号用统一变量管理：

<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>bootstrap</artifactId>
    <version>5.3.2</version> <!-- 替换为你使用的版本 -->
</dependency>

3. 配置Maven依赖解压（可选但推荐） #

为确保sass-maven-plugin稳定找到WebJar中的SCSS文件，可添加maven-dependency-plugin在编译前解压Bootstrap WebJar：

<plugin>
    <groupId>org.apache.maven.plugins</groupId>
    <artifactId>maven-dependency-plugin</artifactId>
    <version>3.6.0</version>
    <executions>
        <execution>
            <id>unpack-bootstrap</id>
            <phase>process-resources</phase>
            <goals>
                <goal>unpack</goal>
            </goals>
            <configuration>
                <artifactItems>
                    <artifactItem>
                        <groupId>org.webjars</groupId>
                        <artifactId>bootstrap</artifactId>
                        <version>${bootstrap.version}</version>
                        <outputDirectory>${project.build.directory}/dependency</outputDirectory>
                    </artifactItem>
                </artifactItems>
            </configuration>
        </execution>
    </executions>
</plugin>

4. 编译并验证CSS输出 #

执行Maven编译命令：

mvn clean compile

编译完成后，检查target/classes/static/css目录下是否生成custom.css文件，打开文件可看到Bootstrap样式已应用自定义变量。

5. 在Thymeleaf模板中引用自定义CSS #

修改Thymeleaf模板，替换原WebJar Bootstrap CSS引用，改为使用编译后的自定义CSS：

<link rel="stylesheet" th:href="@{/css/custom.css}">

注意：Bootstrap的JS组件（如弹窗、下拉）可继续保留WebJar引用，无需修改：

<script th:src="@{/webjars/bootstrap/${bootstrap.version}/js/bootstrap.bundle.min.js}"></script>

6. 测试自定义主题效果 #

启动Spring Boot项目，打开页面检查按钮、导航栏等Bootstrap组件的颜色，确认是否已替换为自定义变量值。

内容的提问来源于stack exchange，提问作者Matteo Tatoni