Symfony Webpack Encore дублирует CSS - PullRequest
Новая
       36

Symfony Webpack Encore дублирует CSS

0 голосов
/ 30 сентября 2019

Я следовал этому (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. Это homepage.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 (который также импортирует строку ранее).

Как я могу избежать этого?

Примечание: если я не использую @import "../app.scss"; в homepage.scss, я получаю "Неиспользованную переменную"ошибка при компиляции.

1 Ответ

1 голос
/ 30 сентября 2019

Мое предположение заключается в том, что вы не можете предотвратить дублирование в ресурсах sass / css путем создания разделенных кусков (или в группах кэша Webpack 4).

При выполнении 

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

homepage.scss всегда будет включать app.scss. Это особенность - не ошибка.

Вы можете

  1. Использовать загрузчик postcss с css nano и включить: discardduplicates . Это, вероятно, будет означать, что все CSS должны быть в одном большом файле (точно не знаю)

  2. Переупорядочить содержимое файлов sass более модульным способом. Эти глобально используемые миксины и переменные находятся в одном файле.

  3. Попробуйте импортировать import '../components/_intro.scss'; в файлы javascript, а не в файлы sass. Может быть, это будет иметь значение.

...