Symfony Webpack 重復 CSS

Question

為了了解使用 Webpack Encore 和 Symfony 時如何拆分文件，我遵循了這個(splitEntryChunks) 教程。

不幸的是，我仍然不太了解它，並且不斷重復。 我有以下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.ZC7A62 8CBA22E28EB17B5F5C6AE2A266AZ ）也包含了整個 app.css 文件（也是前行導入的）。

我怎樣才能避免這種情況？

注意：如果我不使用@import "../app.scss"; 在 homepage.scss 中，我在編譯期間收到“未使用的變量”錯誤。

Answer 1

我對此的看法是，您不能通過創建拆分塊（或在 Webpack 4 個緩存組中）來防止 sass/css 資產中的重復。

做的時候

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

homepage.scss將始終包含app.scss 。 這是一個功能 - 不是錯誤。

你可以

使用帶有css nano 的 postcss 加載器並啟用： discardduplicates 。 這可能意味着，所有 css 必須在一個大文件中（不確切知道）
以更模塊化的方式重新排列 sass 文件內容。 全局使用的 mixins 和變量都在一個文件中。
嘗試導入import '../components/_intro.scss'; 在您的 javascript 文件中，而不是在 sass 文件中。 也許這會有所作為。

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