Question

我按照有关如何在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>

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

引导程序和图表制定者之间是否存在“样式冲突”的可能性？

Answer 1

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

上面的最后一行是导入引导程序样式的地方。

引导程序已正确导入，但样式不起作用

1 个答案: