vue.js - 在组件中包含部分会导致重复的 css

Question

我正在尝试使用 @extend sass 这样我就不会将标记和 html 混合在一起。如 this article 中所述.

简而言之，而不是写

<div class="alert alert-primary>This is an alert!</div>

你会写一些类似的东西

<div class="banner">This is an alert!</div>

.banner {
    @extend .alert;
    @extend .alert-primary;
}

这样样式和内容就可以很好地分开。

问题 :当将此与 webpack( sass-loader )和组件(例如 Vue.js 或 Angular)一起使用时，我遇到了一个问题，其中包含引导部分现在将导致完整的将整个 bootstrap 文件编译成 css。
这导致了一个类 .btn[data-v-3614b62c]和另一个 .btn[data-v-45ac961c]对于使用部分 bootstrap/scss/_buttons.scss 的每个组件等。以及该部分中定义的所有类。
即使我不使用它。

从长远来看，这对应用程序是有害的，因为它的大小会迅速增加，我想象浏览器会因为要解析的 css 类而变慢。

问题 (s): 我如何确保 sass 不会复制整个导入的部分？
我可以启用某种仅包含我使用的类的摇树吗？
我是否必须更改我的文件结构，以便 sass 理解我只需要部分中的某些类而不是所有类？

代码示例

这是一个使用 bootstrap 的 vue 组件

<template>
    <form class="form">
        <input type="text" class="input">
        <button class="button-submit">Send</button>
        <button class="button-cancel">Cancel</button>
    </form>
</template>

<style lang="scss" scoped>
@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/mixins";
@import "node_modules/bootstrap/scss/root";
@import "node_modules/bootstrap/scss/buttons";

.form {
    .button-submit {
        @extend .btn;
        @extend .btn-primary;
    }
    .button-cancel {
        @extend .btn;
        @extend .btn-danger;
    }
}
</style>

这将导致整个部分 _buttons.scss被编译成 css 而不仅仅是 .form .button-submit和 .form .button-cancel .

活生生的例子

https://codesandbox.io/embed/musing-feynman-8w2kx .

要查看我遇到的问题:

右键单击右侧的示例，然后单击检查

在元素选项卡中，导航到 #document > html > head

在底部你会有几个 style元素

其中两个将包含所有按钮 css，其中只有 [data-v-######]属性不同，最后是我的几行代码。

请注意，生产版本也会发生同样的情况。然后将 css 简单地捆绑在一个文件中，但仍然存在重复项。

Answer 1

如果您是 @import将相同的 CSS 规则放入不同的组件中，那么您将在所有模块中复制相同的规则。这就是它的工作原理。

您应该只是 @import定义抽象声明(如变量、mixin、函数等)的模块，而不是实际样式。

全局去重样式的唯一方法是使用类似 mini-css-extract-plugin 的内容。将所有 CSS 提取并组合到一个文件中，然后通过类似 cssnano 的方式运行它这将丢弃重复的规则(尽管使用作用域 CSS，这可能不起作用)。

模块通常独立于其他模块构建，并且没有一种简单的方法可以知道规则是否已被前一个模块声明。在开发中，您可能会使用 style-loader它在每个模块的基础上运行并按需将样式注入(inject)网页；如果某个特定样式已经被另一个组件注入(inject)，它就无法确定应该注入(inject)哪些样式。

它只会变得凌乱；首先不要复制样式，以保持简单。

如果你真的想用@extend ，然后制作一个单独的 .scss文件是唯一的模块 @import s bootstrap 样式，并在其中定义所有扩展。