在 VueJS 组件之间共享公共 CSS

Question

我正在处理 VueJS 2 项目，我正在尝试清理代码，但在作用域样式方面遇到困难。

这是我的要求。 :)

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

但是，我还想做的一件事是将 scoped style 也移动到混音中。目前，该样式包含在 <style lang="scss" scoped></style> 标签中，并且该样式在其组件上运行良好，但我必须将样式代码复制到所有 3 个组件中。

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

有什么方法可以添加这些样式并应用到 mixin 中吗？

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

Answer 1

也许使用模块而不是设置具有作用域属性的 style 部分。

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

这样，您的 CSS 仍将处于范围内，而不是全局样式的一部分。

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>

这里发生的事情是，当我们用这个 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 的样式将自动应用，并且也可以与其他想要使用相同父样式的组件组一起使用。

Answer 3

Vue 让这一切变得简单。

解决方案

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

MyComponent.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 文件，而不是像下面这样。

MyComponent.js

<template>
</template>

<script>
</script>

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

styles.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 4

我刚刚将 fadeTransition.css 文件放入我的 vue app /assets 文件夹中，然后像这样导入：

<template>
  <transition name="fade">
    <div v-if="showContent">test</div>
  </transition>
</template>
<script>
  import '@/assets/fadeTransition.css';
  // component definition
</script>

fadeTransition.css

/* fade menus in, not out */
.fade-enter-active {
  transition: opacity .5s;
}
.fade-enter {
  opacity: 0;
}

简洁明了。应该也适用于 scss。

干杯！

在 VueJS 组件之间共享公共 CSS

Sharing common CSS across VueJS components

css

scope

mixins

vue.js

vuejs2

解决方案

备选

自动导入全局样式