根据当前语言加载不同的 scss 文件 - nuxt

Posted 2023-02-22

【中文标题】根据当前语言加载不同的 scss 文件 - nuxt

【英文标题】：loading different scss file based on current language - nuxt

【发布时间】：2021-08-28 13:48:30

【问题描述】：

我正在尝试在我的 nuxt 应用程序中实现 rtl/ltr。 这是我的项目结构

|--assets
   |--scss
     |--**/*.scss
     |--bundle.scss
     |--bundle-rtl.scss

所以样式通常会编译到 bundle 和 bundle-rtl 中。 问题是这个..如何在这两个 scss 文件之间切换而不在我的 nuxt.config 中手动更改它们（更改语言时自动更改 scss 文件）。 这些文件中有一个 mixin 文件，其中包含许多与 rtl 和 ltr 切换相关的 mixin，因此我需要在我拥有的每个 vue 文件中使用它们。这就是为什么我不能将它们编译为 css（例如使用 gulp 或 webpack）并将它们包含在 head 中。 除了所有这些，这是在 nuxt 中实现 ltr/rtl 的最佳方法还是有更好的方法？

【参考方案1】：

在我看来，您应该编写考虑到这一点的现代 CSS，而不是重复。这将有利于其他语言也可以使用。

查看这篇很棒的文章：https://css-tricks.com/building-multi-directional-layouts/

【讨论】：

哇！ ...这实际上是一个非常好的解决方案..我的意思是我会在模板文件中丢失我所有的 mixin，但它比替代方案更好。

对我来说，它仍然是最干净且性能更高的解决方案，因为按照.scss 文件处理它会非常混乱。您可以将某种动态样式直接添加到您的模板中，但这也会变得混乱/丑陋。或者至少，您可能需要在通常的文件之上加载一个小的 .scss 文件，以便对 IMO 进行一些更改。

好吧，我没有其他选择，我什至不认为有其他选择。

不是不丑是的。