我关注了this (splitEntryChunks) 教程，以了解在使用 Webpack Encore 和 Symfony 时如何拆分文件。
不幸的是，我仍然不太理解它，而且我不断收到很多重复。我有以下 app.scss 文件:
// Config
@import "vars/_vars.scss";
@import "mixins/_fontface.scss";
@import "base/_common.scss";
此文件包含站点的基本样式并且始终导入到base.html.twig:
<head>
{% block stylesheets %}
{{ encore_entry_link_tags('app') }}
{% endblock %}
</head>
这是我的 webpack.config.js:
const Encore = require('@symfony/webpack-encore');
Encore
// [...]
.addEntry('app', './assets/js/app.js')
.addEntry('homepage', './assets/js/homepage.js')
.splitEntryChunks()
// [...]
;
现在我有一个 homepage.scss 文件，它包含主页的特定代码并继承自 base.html.twig。这是主页.html.twig:
{% extends 'base.html.twig' %}
{% block stylesheets %}
{{ parent() }}
{{ encore_entry_link_tags('homepage') }}
{% endblock %}
这是 homepage.scss(注意 app.scss 导入):
@import "../app.scss";
@import "../components/_intro.scss";
现在一切正常，但我有以下生成的 CSS:
<link rel="stylesheet" href="/build/app.css">
<link rel="stylesheet" href="/build/homepage.css">
第二个文件 (homepage.css) 也包含整个 app.css 文件(也是在前一行导入的)。
我怎样才能避免这种情况？
注意:如果我不在 homepage.scss 中使用 @import "../app.scss";，我会在编译期间收到“未使用的变量”错误。
最佳答案
我对此的看法是，您不能通过创建拆分块(或在 Webpack 4 缓存组中)来防止 sass/css Assets 中的重复。
做的时候
@import "../app.scss";
@import "../components/_intro.scss";
homepage.scss 将始终包含 app.scss。这是一项功能 - 而不是错误。
你可以
使用 the postcss loader与 css nano并启用:discardduplicates .这可能意味着，所有的 css 必须在一个大文件中(不知道确切)
以更加模块化的方式重新排列 sass 文件内容。全局使用的 mixins 和变量在一个文件中。
尝试在您的 javascript 文件中导入
import '../components/_intro.scss';而不是在 sass 文件中。也许这会有所作为。
关于css - Symfony Webpack Encore 重复的 CSS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58166182/