时间戳

首页 > 解决方案 > Bootstrap 正确导入但样式不起作用

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

问题描述

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

我试图在不同的块和 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>

仅导入图表样式，否则不导入。

bootstrap 和 chartist 之间是否存在“风格冲突”的可能性？

标签： symfonybootstrap-4twig

解决方案

我让它与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";

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

推荐阅读