Symfony Webpack 重复 CSS

Question

I followed this (splitEntryChunks) tutorial in order to understand how the files are splitted when using Webpack Encore and Symfony.为了了解使用 Webpack Encore 和 Symfony 时如何拆分文件，我遵循了这个(splitEntryChunks) 教程。

Unfortunately I still don't understand it very well and I keep getting many duplications.不幸的是，我仍然不太了解它，并且不断重复。 I have the following app.scss file:我有以下app.scss文件：

// Config
@import "vars/_vars.scss";
@import "mixins/_fontface.scss";
@import "base/_common.scss";

This file contains the basic style for the site and is always imported in base.html.twig :此文件包含站点的基本样式，并且始终在 base.html.twig 中导入：

    <head>
        {% block stylesheets %}
            {{ encore_entry_link_tags('app') }}
        {% endblock %}
    </head>

This is my webpack.config.js:这是我的 webpack.config.js：

const Encore = require('@symfony/webpack-encore');

Encore
    // [...]
    .addEntry('app', './assets/js/app.js')
    .addEntry('homepage', './assets/js/homepage.js')

    .splitEntryChunks()
    // [...]
;

Now I have a homepage.scss file which contains specific code for the homepage and inherits from base.html.twig.现在我有一个 homepage.scss 文件，其中包含主页的特定代码并继承自 base.html.twig。 This is the homepage.html.twig:这是主页。html.twig：

{% extends 'base.html.twig' %}

{% block stylesheets %}
    {{ parent() }}
    {{ encore_entry_link_tags('homepage') }}
{% endblock %}

And this is the homepage.scss (notice the app.scss import):这是homepage.scss （注意 app.scss 导入）：

@import "../app.scss";
@import "../components/_intro.scss";

Now it's all working correctly but I have the following generated CSS:现在一切正常，但我生成了以下 CSS：

<link rel="stylesheet" href="/build/app.css">
<link rel="stylesheet" href="/build/homepage.css">

The second file ( homepage.css ) also contains the entire app.css file (which is also imported the line before).第二个文件（ homepage.ZC7A62 8CBA22E28EB17B5F5C6AE2A266AZ ）也包含了整个 app.css 文件（也是前行导入的）。

How can I avoid this?我怎样才能避免这种情况？

Note: if I don't use the @import "../app.scss";注意：如果我不使用@import "../app.scss"; in homepage.scss I get an "Unused variable" error during compilation.在 homepage.scss 中，我在编译期间收到“未使用的变量”错误。

Answer 1

My take on this is, that you cannot prevent duplicates in sass/css assets by creating split chunks (or in Webpack 4 cache groups).我对此的看法是，您不能通过创建拆分块（或在 Webpack 4 个缓存组中）来防止 sass/css 资产中的重复。

When doing做的时候

@import "../app.scss";
@import "../components/_intro.scss";

homepage.scss will always include the app.scss . homepage.scss将始终包含app.scss 。 That is a feature - not a bug.这是一个功能 - 不是错误。

You could你可以

Use the postcss loader with css nano and enable: discardduplicates .使用带有css nano 的 postcss 加载器并启用： discardduplicates 。 This would probably mean, that all css must be in one large file (do not know exactly)这可能意味着，所有 css 必须在一个大文件中（不确切知道）
Rearrange the sass files content in a more modular way.以更模块化的方式重新排列 sass 文件内容。 That globally used mixins and variables are in one file.全局使用的 mixins 和变量都在一个文件中。
Try importing import '../components/_intro.scss';尝试导入import '../components/_intro.scss'; in your javascript files and not in the sass files.在您的 javascript 文件中，而不是在 sass 文件中。 Maybe this will make a difference.也许这会有所作为。

Symfony Webpack 重复 CSS

问题描述

1 个解决方案

解决方案1
1 2019-09-30 11:16:51

Symfony Webpack 重复 CSS

问题描述

1 个解决方案

解决方案1 1 2019-09-30 11:16:51

解决方案1
1 2019-09-30 11:16:51