Symfony Webpack Encore дублированный CSS

Чтобы понять, как файлы разделяются при использовании 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, я получаю ошибку «Неиспользуемая переменная» во время компиляции.


webpack css symfony sass webpack-encore
person StockBreak    schedule 30.09.2019    source источник
comment
Импортируйте только те файлы, которые вам нужны. Например @import "vars/_vars.scss"; в homepage.scss   -  person madflow    schedule 30.09.2019
comment
К сожалению, это не решает проблему, поскольку _vars.scss все равно будет дублироваться.   -  person StockBreak    schedule 30.09.2019
comment
Но разве это не дерзкие вары? Я просто предположил, что дело обстоит именно так ... Извини.   -  person madflow    schedule 30.09.2019
comment
Извините, да это просто переменные sass, может быть нормально, если они будут продублированы?   -  person StockBreak    schedule 30.09.2019
comment
Переменные Sass не отображаются в вашем выводе. Я бы сказал, что их повторное использование - одно из основных преимуществ sass.   -  person madflow    schedule 30.09.2019

Ответы (1)


arrow_upward
1
arrow_downward

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

Когда делаешь

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

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

Вы могли

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

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

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

person madflow    schedule 30.09.2019
comment
Я пробовал импортировать их в JS, а не в SASS, но, к сожалению, это не имеет никакого значения :( - person StockBreak; 30.09.2019