我正在研究VueJS 2项目,我正在尝试清理代码,但却在使用范围样式。
这是我的要求。 :)
我有3个组件,彼此非常相似,所以我决定使用mixins
将代码合并到一个文件中。每个组件都将使用mixins
和template
中的vuejs
。当我想自定义特定组件的条件时,我可以简单地覆盖它中的代码,它在这部分工作正常。
但是,我想要做的更多事情是将scoped style
移动到mixins。目前,样式包含在<style lang="scss" scoped></style>
标记中,此样式在其组件上运行良好,但我必须将样式代码复制到所有3个组件中。
我知道我可以将这些样式添加到全局css文件中,但我不想在全局范围内使用某些样式,这些3个组件中只有一个适用于这些样式。
是否可以添加这些样式并应用于mixins?
编写此特定案例的最佳做法是什么?
答案 0 :(得分:15)
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";
`
},
},
},
}
答案 1 :(得分:2)
也许使用模块而不是设置带有作用域属性的style
部分。
https://vue-loader.vuejs.org/en/features/css-modules.html
这样你的CSS仍将是作用域,而不是你的全局样式的一部分。
答案 2 :(得分:2)
我发现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
中的样式将自动应用,并且还可以与想要使用相同父样式的其他组件组一起使用。
答案 3 :(得分:0)
我只是将我的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。
干杯!