无法使用 Encore 在 Symfony 5.3 上正确安装和使用引导程序答案

【问题标题】：Unable to properly install and use bootstrap on Symfony 5.3 using Encore无法使用 Encore 在 Symfony 5.3 上正确安装和使用引导程序
【发布时间】：2021-10-25 17:28:38
【问题描述】：

由于我目前正在使用旧的 Symfony 版本，因此我从头开始了一个新的 5.3 Symfony 应用程序。我在使用引导程序时遇到了麻烦。在跟进一些文档后，我安装了纱线和：

yarn add bootstrap --dev
yarn add node-sass sass-loader --dev

Mu base.twig.html 有正确的链接/脚本标签：

<!DOCTYPE html>
<html>
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>{% block title %}{% endblock %}</title>

        {% block stylesheets %}
            {{ encore_entry_link_tags('app') }}
        {% endblock %}

    </head>
    <body>
        {% block body %}{% endblock %}
    </body>
    {% block javascripts %}
        {{ encore_entry_script_tags('app') }}

    {% endblock %}
</html>

我的 app.js：

/*
 * Welcome to your app's main JavaScript file!
 *
 * We recommend including the built version of this JavaScript file
 * (and its CSS file) in your base layout (base.html.twig).
 */


// any CSS you import will output into a single css file (app.css in this case)
import './styles/app.scss';

// start the Stimulus application
import './bootstrap';

我也有 app.scss 空和 app.css ：

@import '~bootstrap/scss/bootstrap';

还有什么我遗漏的吗？我有一个 index.html.twig，它有一个示例表单，但没有渲染它的 css：

{% extends 'base.html.twig' %}

{% block title %}Hello IndexController!{% endblock %}

{% block body %}
    <form>
        <div class="form-group">
            <label for="exampleInputEmail1">Email address</label>
            <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
            <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
        </div>
        <div class="form-group">
            <label for="exampleInputPassword1">Password</label>
            <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
        </div>
        <div class="form-check">
            <input type="checkbox" class="form-check-input" id="exampleCheck1">
            <label class="form-check-label" for="exampleCheck1">Check me out</label>
        </div>
        <button type="submit" class="btn btn-primary">Submit</button>
    </form>
{% endblock %}
{% block javascripts %}
<script>
    console.log('test');
</script>
{% endblock %}

`我试着看看这里：

【问题讨论】：

另外 .enableSassLoader() 在 webpack.confing.js 中没有注释

标签： javascript php css twitter-bootstrap symfony

【解决方案1】：

已解决：@import '~bootstrap/scss/bootstrap';在 app.css 中，在将其移至 app.scss 后它工作了

【讨论】：