我正在尝试使用 @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 .
要查看我遇到的问题:
style
元素 [data-v-######]
属性不同,最后是我的几行代码。 请注意,生产版本也会发生同样的情况。然后将 css 简单地捆绑在一个文件中,但仍然存在重复项。
最佳答案
如果您是 @import
将相同的 CSS 规则放入不同的组件中,那么您将在所有模块中复制相同的规则。这就是它的工作原理。
您应该只是 @import
定义抽象声明(如变量、mixin、函数等)的模块,而不是实际样式。
全局去重样式的唯一方法是使用类似 mini-css-extract-plugin 的内容。将所有 CSS 提取并组合到一个文件中,然后通过类似 cssnano 的方式运行它这将丢弃重复的规则(尽管使用作用域 CSS,这可能不起作用)。
模块通常独立于其他模块构建,并且没有一种简单的方法可以知道规则是否已被前一个模块声明。在开发中,您可能会使用 style-loader它在每个模块的基础上运行并按需将样式注入(inject)网页;如果某个特定样式已经被另一个组件注入(inject),它就无法确定应该注入(inject)哪些样式。
它只会变得凌乱;首先不要复制样式,以保持简单。
如果你真的想用@extend
,然后制作一个单独的 .scss
文件是唯一的模块 @import
s bootstrap 样式,并在其中定义所有扩展。
关于vue.js - 在组件中包含部分会导致重复的 css,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58905949/