Bootstrap 正确导入但样式无效

Question

我按照有关如何在 symfony 上导入 bootstrap 的说明进行操作，但它似乎没有导入任何样式。

我试过在不同的块和div中导入它，但它似乎没有做任何事情。我正在使用 Webpack encore，它每次都能正确编译。

我的 app.js 文件：

// any CSS you require will output into a single css file (app.css in this case)
require('../css/app.css');
require('chartist/dist/chartist.css');
const Chartist = require('chartist');
window.Chartist = Chartist;

// Need jQuery? Install it with "yarn add jquery", then uncomment to require it.
const $ = require('jquery');
window.$ = $;

// this "modifies" the jquery module: adding behavior to it
// the bootstrap module doesn't export/return anything
require('bootstrap');

我的树枝模板（不是基本模板）：

<!DOCTYPE html>
<html>

<h1>
    {{ encore_entry_link_tags('app') }}
    {{ encore_entry_script_tags('app') }}
</h1>

{% block head %}
    <nav class="navbar">
        <ul id="menu" class="navbar">
            <li class="active"><a href="#">First Entry</a></li>
            <li><a href="#">Second Entry</a></li>
            <li><a href="#">Third Entry</a></li>
            <li><a href="#">Fourth Entry</a></li>
        </ul>
    </nav>
{% endblock %}

{% block body %}


    <div class="container">

        <div class="app-chartist" data-url="{{ path('data') }}"></div>
    </div>
{% endblock %}
</html>

仅导入图表样式，否则 none 无论如何。

bootstrap和chartist之间有"style conflicts"的可能吗？

Answer 1

我让它与 scss 一起工作。

在我的app.js文件中：

require('../css/app.scss');
const $ = require('jquery');
global.$ = global.jQuery = $;
require('bootstrap');

上面最后一行导入了 bootstrap javascript

然后在我的app.scss文件中：

// optionally customize some Bootstrap variables
$primary: darken(#428bca, 20%);
$dark: lighten(black,10%);
$light: lighten($dark, 65%);
$white: darken(#FFFFFF, 5%);

// the ~ allows you to reference things in node_modules
@import "~bootstrap/scss/bootstrap";

上面最后一行是导入 bootstrap 样式的地方。

Bootstrap 正确导入但样式无效

Bootstrap correctly imported but styles not working

symfony

twig

bootstrap-4