symfony - Bootstrap 已正确导入,但样式不起作用

标签 symfony bootstrap-4 twig

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

我尝试将它导入到不同的 block 和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');

我的 Twig 模板(不是基本模板):

<!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> 

仅导入图表样式,否则不导入任何样式。

Bootstrap 和 Chartist 之间是否存在“风格冲突”的可能性?

最佳答案

我让它与 scss 一起工作。

在我的 app.js 文件中:

require('../css/app.scss');
const $ = require('jquery');
global.$ = global.jQuery = $;
require('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";

上面的最后一行是导入引导样式的位置。

关于symfony - Bootstrap 已正确导入,但样式不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57292261/

相关文章:

forms - 嵌入表单的持久性

php - 如何使用来自非托管实体的数据正确更新托管实体?

css - bootstrap 4 中的合理嵌套按钮组

twig - Symfony 和 PhpStorm twig 没有给我任何关于 twig 函数的建议

php - 如何在 Twig 中对 HTML 转义文本进行 URL 编码?

Symfony2 : phpinfo() using a twig template for layout?

symfony - 貂皮选择器 : any way to get the element in base of the content inside?

html - 导航栏切换按钮在单击时右移

angular - Bootstrap 4 不适用于 Angular 2 应用程序

html - 使用 Twig 将自定义 HTML 附加到与 form_row 相同的 div