跨VueJS组件共享通用CSS

提问于 2024-04-28T17:16:58+08:00

浏览次

4

我正在研究VueJS 2项目，我正在尝试清理代码但是在使用范围样式方面很难 .

这是我的要求 . :)

我有3个组件，彼此非常相似，所以我决定使用 mixins 将代码合并到一个文件中 . 每个组件都将使用 template 和 vuejs 的 mixins . 当我想自定义特定组件的条件时，我可以简单地覆盖它中的代码，它在这部分工作正常 .

但是，我想要做的更多事情就是将 scoped style 移动到mixins . 目前，样式包含在 <style lang="scss" scoped></style> 标签中，这种样式在其组件上运行良好，但我必须将样式代码复制到所有3个组件中 .

我知道我可以将这些样式添加到全局css文件中，但我不希望某些样式到全局范围，只有一个这三个组件适用于这些 .

是否可以添加这些样式并应用于mixins？

编写此特定案例的最佳做法是什么？

2 回答

0

也许使用模块而不是使用scoped属性设置 style 部分 .

https://vue-loader.vuejs.org/en/features/css-modules.html

这样，您的CSS仍将是作用域，而不是您的全局样式的一部分 .

回复于 2024-04-28T17:16:58+08:00
0
我刚刚发现 scoped style 也会对子组件产生影响 .

因此，我找到了解决方案，不确定它是最佳实践，但我觉得非常好 .

创建一个 WrapperComponent ，我把 scoped style 放在这里和一个小模板 .
```
<template>
    <slot></slot>
</template>

<style lang="scss" scoped>
    /* css style that will apply to all children */
</style>
```
这里发生的是，当我们使用 WrapperComponent 包装任何组件时，模板将通过 slot 传递HTML而不进行任何修改，并且样式将从现在开始应用 .

在 mixins 中，我导入此包装器并使用 WrapperComponent 包装组件模板 . 这是一个例子 .
```
import WrapperComponent from './WrapperComponent'

let MyMixins = {

    template: `<wrapper-component>
        <div>
            Whatever HTML code here
        </div>
    </wrapper-component>`,


    components: {
        WrapperComponent,
    },
};
```
当我们使用 mixins 或子组件时， WrapperComponent 中的样式将自动应用，也可以与想要使用相同父样式的其他组件组一起使用 .
回复于 2024-04-28T17:16:58+08:00

相关问题