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