我开始了一个小型的symfony项目，在app.css中加载bootstrap.在app.css中我还有另一个include "navigation.scss"，在这个include中我使用bootstrap混合，并且它包含在基本布局模板中，问题是，如果我在webpack.config.js中创建另一个入口点，在第二个模板中添加css文件，这扩展了布局，bootstrap将工作，但我不能从bootstrap中访问mixin函数，唯一的解决方案是在该css中也导入bootstrap。 问题是如果我在webpack.config.js中创建另一个入口点，在第二个模板中添加css文件，这扩展了布局，bootstrap将工作，但我不能从bootstrap中访问mixin函数，唯一的解决方案是在该css文件中也导入bootstrap，但这样我在两个css文件中都有两个bootstrap库，它们将相互覆盖。如何才能让bootstrap和 mixin一起在全球范围内使用，这样就只需要导入一次。
webpack.config.js
* ENTRY CONFIG
*
* Add 1 entry for each "page" of your app
* (including one that's included on every page - e.g. "app")
*
* Each entry will result in one JavaScript file (e.g. app.js)
* and one CSS file (e.g. app.css) if your JavaScript imports CSS.
*/
.addEntry('app', './assets/js/app.js')
.addEntry('homepage', './assets/js/front/homepage.js')
//.addEntry('page2', './assets/js/page2.js')
// When enabled, Webpack "splits" your files into smaller pieces for greater optimization.
.splitEntryChunks()
// will require an extra script tag for runtime.js
// but, you probably want this, unless you're building a single-page app
.enableSingleRuntimeChunk()
app.css
// Required
@import "~bootstrap";
@import './helper/variables';
@import 'front/includes/navigation';
基本布局
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>{% block title %}Test Application{% endblock %}</title>
{{ encore_entry_link_tags('app') }}
{% endblock %}
</head>
第二页 css
@import "~bootstrap";
.hero-banner__wrapper {
min-height: 700px;
background-size:cover;
}
header {
background: linear-gradient(to right, rgba(200, 6, 81, 0.6), rgba(44,13,72,10.6));
&.menu-active {
background: rgba(44,13,72,1);
}
}
@include media-breakpoint-down(md) {
}
第二页模板
{% extends 'front_layout.html.twig' %}
{% block stylesheets %}
{{ parent() }}
{{ encore_entry_link_tags('homepage') }}
{% endblock %}
{% block hero %}
<div class="hero-banner__wrapper" style="background-image: url({{ asset('build/img/hero_img.jpg') }})">
</div>
{% endblock %}
{% block javascripts %}
{{ parent() }}
{{ encore_entry_script_tags('homepage') }}
{% endblock %}
我认为你导入的顺序不对。这个结构应该适合你的情况。
app.scss
// Required
@import "~bootstrap";
@import './helper/variables';
@import 'front/includes/navigation';
// OTHER THIRD PARTY CSS
page1.scss
@import "./app.scss";
// CUSTOM SCSS
page2.scss
@import "./app.scss";
// CUSTOM SCSS
这样一来，您可以加载 app.scss 档案在你 layout.html.twig覆盖它就可以了（定义样式表块而不调用 parent())如果您需要在 page1.html.twig 与 page1.scss 其中重装所有的 app.scss 但你有变量，混搭，并不是所有的东西都要两次。
编辑
回答你的评论，有几种方式来构建你的项目。
第一个方法
做一个 main.scss 其中包含所有的导入（bootstrap，...）和全局性的东西，如导航条，页脚，侧边栏...为每个页面制作一个SCSS文件。main.scss 然后 page1.scss.
简历。至少2个HTTP请求，可重复使用 main.scss 不过 page1.scss 不包含任何混搭元素。
第二种方式
做一个 main.scss 它包含了所有的导入（bootstrap，...）和全局性的东西，如导航条，页脚，侧边栏...为每个页面制作一个SCSS文件，并导入。main.scss.在每个页面上，只加载 page1.scss.
简历。1个HTTP请求（如果你有太多的SCSS文件更好），你可以有混搭，但你会有。bootstrap 在每个SCSS文件中。
第三种方式
当你打开 bootstrap.scss 你可以看到它所做的每一个导入。所以你可以看到，你只能在你的SCSS文件中添加这些行来访问Bootstrap的mixins。
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";