Symfony项目中Webpack编译Bootstrap自定义SCSS变量失败求助

你的问题核心是两点：

1. 自定义的SCSS变量$footer仅被定义，但Bootstrap不会自动为它生成对应的bg-footer工具类
2. 即便变量定义在Bootstrap导入前，若Bootstrap内部未使用该变量，它也不会影响现有样式

解决方法一：覆盖Bootstrap内置变量（推荐，贴合Bootstrap设计） #

如果只是要修改导航栏背景色，直接覆盖Bootstrap专门用于navbar的变量，无需自定义类名：

修改app.scss：

// 覆盖navbar-light的背景色变量
$navbar-light-bg: #F76C6C;

@import "~bootstrap/scss/bootstrap";

导航栏代码保持使用默认类：

<nav class="navbar navbar-light">
    <div class="container-fluid">
        <a class="navbar-brand" href="/">
            <img src="{{ asset('build/images/logo-wild.png') }}" alt="" width="70" height="24" class="d-inline-block align-text-top">
            Les Argonautes
        </a>
    </div>
</nav>

解决方法二：生成自定义背景色工具类 #

如果确实需要bg-footer这类自定义类，用Bootstrap提供的bg-variant混合宏生成和官方工具类一致的样式：

修改app.scss：

$footer: #F76C6C;

@import "~bootstrap/scss/bootstrap";

// 生成自定义bg-footer类
.bg-footer {
    @include bg-variant($footer);
}

编译后，bg-footer类就会具备和bg-primary等官方类相同的样式属性，你的导航栏代码可保持不变。

额外检查事项 #

1. 确认Webpack Encore配置已启用Sass加载：
   打开webpack.config.js，确保包含以下配置：

Encore
    // ...其他配置
    .enableSassLoader()
    // ...其他配置

2. 重新编译资源：
   执行yarn build或yarn watch（开发环境）重新生成CSS文件

3. 确认模板已正确引入编译后的CSS：
   在基础模板（如base.html.twig）中确保有：

<link rel="stylesheet" href="{{ asset('build/app.css') }}">

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