gpt4 book ai didi

css - Symfony Webpack Encore 重复的 CSS

转载 作者:太空宇宙 更新时间:2023-11-04 05:52:10 28 4
gpt4 key购买 nike

我关注了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。这是一项功能 - 而不是错误。

你可以

  1. 使用 the postcss loadercss nano并启用:discardduplicates .这可能意味着,所有的 css 必须在一个大文件中(不知道确切)

  2. 以更加模块化的方式重新排列 sass 文件内容。全局使用的 mixins 和变量在一个文件中。

  3. 尝试在您的 javascript 文件中导入 import '../components/_intro.scss'; 而不是在 sass 文件中。也许这会有所作为。

关于css - Symfony Webpack Encore 重复的 CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58166182/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com