我可以使用带有样式标签的V-IF选择其他源文件吗?还是有更好的选择?
我尝试在下面进行示例,但这是行不通的。我之所以尝试这样做的原因是,我必须添加太多的修饰符( - 调整)才能使这项工作。因此,我试图根据条件来源自CSS文件。为什么这不起作用,有人知道是否有更好的选择比一百万个修饰符?
<style v-if="!isTuningActive" lang="scss" src="./normal-version.scss"></style>
<style
v-else
lang="scss"
src="./tuned-version.scss"
></style>
I tried doing the example below, but it would not work. The reason why I am trying to do this is is that I would have to add way too many modifiers (--tuned) to make this work. So I was trying to source the css file based on a condition. Why would this not work and does anyone know if there is a better alternative that a million modifiers ?
<style v-if="!isTuningActive" lang="scss" src="./normal-version.scss"></style>
<style
v-else
lang="scss"
src="./tuned-version.scss"
></style>
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
![扫码二维码加入Web技术交流群](/public/img/jiaqun_03.jpg)
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
为什么不分为组件?每个组件都带有自己的样式。
Why not separate into components? Each components with his own styling.
https://vuejs.org/guide/essentials/component-basics.html
您可以将单独的SCSS文件编译到单个样式表中(例如Main.scss),然后将该Main.scss文件导入您的父组件(可能,App.Vue)。
这将使您可以简单地在上面的示例上切换CSS类,而不是尝试有条件地导入样式表。
例如,可以说您的新“ main.scss”文件包含以下SCSS。
然后,您只需要根据您的 IsTuningActive 属性动态添加类。
有用的引用:
You can compile your separate scss files into a single stylesheet (main.scss for example), then just import that main.scss file into your parent component (likely, App.vue).
This will allow you to simply switch the css class on your example above instead of trying to conditionally import stylesheets.
For example, lets say your new 'main.scss' file contains the following scss.
Then you'll simply need to dynamically add the class depending on your isTuningActive property.
Helpful references: