我可以使用带有样式标签的V-IF选择其他源文件吗?还是有更好的选择?

发布于 2025-01-31 10:06:36 字数 312 浏览 0 评论 0原文

我尝试在下面进行示例,但这是行不通的。我之所以尝试这样做的原因是,我必须添加太多的修饰符( - 调整)才能使这项工作。因此,我试图根据条件来源自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技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

隱形的亼 2025-02-07 10:06:36

为什么不分为组件?每个组件都带有自己的样式。

Why not separate into components? Each components with his own styling.

https://vuejs.org/guide/essentials/component-basics.html

春花秋月 2025-02-07 10:06:36

您可以将单独的SCSS文件编译到单个样式表中(例如Main.scss),然后将该Main.scss文件导入您的父组件(可能,App.Vue)。

这将使您可以简单地在上面的示例上切换CSS类,而不是尝试有条件地导入样式表。

例如,可以说您的新“ main.scss”文件包含以下SCSS。

.tuned-version {
   p { color: red }
}

.untuned-version {
   p { color: blue } 
}

然后,您只需要根据您的 IsTuningActive 属性动态添加类。

<div :class="isTuningActive ? 'tuned-version' : 'untuned-version">
    <p>My content</p>
</div>

有用的引用:

  1. 在VUE中编译SCSS: htttps:htttps://vue-loader。 vuejs.org/guide/pre-processors.html#sass
  2. 动态类绑定: https://vuejs.org/guide/esentials/class-and-sentyle.html#binding-html-classes

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.

.tuned-version {
   p { color: red }
}

.untuned-version {
   p { color: blue } 
}

Then you'll simply need to dynamically add the class depending on your isTuningActive property.

<div :class="isTuningActive ? 'tuned-version' : 'untuned-version">
    <p>My content</p>
</div>

Helpful references:

  1. Compiling scss in Vue: https://vue-loader.vuejs.org/guide/pre-processors.html#sass
  2. Dynamic class binding: https://vuejs.org/guide/essentials/class-and-style.html#binding-html-classes
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文