解决方案

Question

我正在研究VueJS 2项目，我正在尝试清理代码，但却在使用范围样式。

这是我的要求。：）

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

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

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

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

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

Answer 1

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 2

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

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

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

Answer 3

我发现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而不进行任何修改，并且样式将从现在开始应用。< / p>

在mixins中，我导入此包装器并使用WrapperComponent包装组件模板。这是一个例子。

import WrapperComponent from './WrapperComponent'

let MyMixins = {

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


    components: {
        WrapperComponent,
    },
};

当我们使用此mixins或子组件时，WrapperComponent中的样式将自动应用，并且还可以与想要使用相同父样式的其他组件组一起使用。

Answer 4

我只是将我的fadeTransition.css 文件放入我的vue 应用程序/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

4 个答案:

解决方案

替代

自动导入全局样式