跨VueJS组件共享通用CSS

Question

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

这是我的要求.:)

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

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

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

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

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

Answer 1

Vue 让这一切变得简单。

解决方案

要在组件中使用共享样式，您可以这样做。

我的组件.js

<template>
</template>

<script>
</script>

<style lang="scss" scoped>
  @import '@/scss/shared-styles.scss';
  @import 'styles.scss'; // this is the regular CSS used just by the component
</style>

选择

您还可以在组件 CSS 文件中导入共享的 CSS 文件，如下所示。

我的组件.js

<template>
</template>

<script>
</script>

<style lang="scss" scoped>
  @import 'styles.scss';
</style>

样式.scss

@import '@/scss/shared-styles.scss'

// rest of your component CSS

自动导入全局样式

如果您希望某些样式在您的所有组件中可用，您可以执行此操作。

vue.config.js

module.exports = {
  ...
  css: {
    loaderOptions: {
      sass: {
        prependData: `
          @import "@/scss/global.scss";
        `
      },
    },
  },
}

Answer 2

我刚刚发现scoped style对子组件也有影响。

因此，我找到了解决方案，不确定它是否是最佳实践，但我对此感到非常满意。

创建一个WrapperComponent我把scoped style这里和一个小模板。

<template>
    <div>
        <slot></slot>
    </div>
</template>

<style lang="scss" scoped>
    /* css style that will apply to all children */
</style>

这里发生的事情是，当我们用 this 包装任何组件时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或子组件时，样式 fromWrapperComponent将被自动应用，也可以与想要使用相同父样式的其他组件组一起使用。