我正在开发 VueJS 2 项目，我正在尝试清理代码，但在使用范围样式时遇到了困难。
这是我的要求。 :)
我有 3 个非常相似的组件，所以我决定使用mixins 将代码合并到一个文件中。每个组件将使用template 和vuejs 中的mixins。当我想自定义特定组件的条件时，我可以简单地覆盖其中的代码，它在这部分工作正常。
然而，我想做的一件事是将scoped style 也移动到mixin 中。目前，样式被包裹在<style lang="scss" scoped></style> 标签中，这种样式在它的组件上效果很好，但我必须将样式代码复制到所有 3 个组件中。
我知道我可以将这些样式添加到全局 css 文件中，但我不希望将某些样式添加到全局范围内，这 3 个组件中只有一个适用于这些。
有没有办法添加这些样式并应用于mixins？
编写这种特殊情况的最佳实践是什么？
【问题讨论】：
标签： css vue.js scope vuejs2 mixins
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";
`
},
},
},
}
【讨论】：
.scss 才能为
lang="scss" 属性：<style scoped>。
scoped 作品正确。我@import 的样式正在全球范围内为我显示（我不想要）。
我刚刚发现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 的样式将被自动应用，也可以与其他想要使用相同父样式的组件组一起使用。
【讨论】：
也许使用模块而不是设置具有作用域属性的style 部分。
https://vue-loader.vuejs.org/en/features/css-modules.html
这样，您的 CSS 仍将被限定，而不是您的全局样式的一部分。
【讨论】：
CSS Modules 作品不能满足我的需求。它就像添加另一个级别的 css 但可能是一个不错的选择。
我刚刚将我的 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。
干杯！
【讨论】：