如何在 Next.js 中有条件地导入 SCSS 样式表？答案

【问题标题】：How to conditionally import a SCSS stylesheet in Next.js?如何在 Next.js 中有条件地导入 SCSS 样式表？
【发布时间】：2021-03-29 21:54:13
【问题描述】：

我正在尝试根据环境在_app.js 中加载样式表：

if (process.env.NODE_ENV === 'production' ) {
  import '../styles/globals-production.scss'
} else {
  import '../styles/globals-staging.scss'
}

但在控制台中出现此错误：Syntax error: 'import' and 'export' may only appear at the top level

关于如何使用 Next.js 做到这一点的任何想法？

【问题讨论】：

你能解释一下为什么你首先需要两个样式表用于两个不同的环境吗？可以根据环境导入不同的样式表（例如，可以使用 CommonJS require 语法，自定义 webpack 是另一种选择），但可能会有更好、更简单的替代方案。
这里已经有类似问题的答案：stackoverflow.com/questions/46835825/… 但@Jelefra 非常正确地问了，你为什么需要这个...？
您是否希望支持主题？喜欢深色、浅色主题？
也希望有这样的功能。我正在构建一个框架，用户应该能够选择他们想要的东西。如果他们不想要按钮，他们就不需要样式中的按钮 scss，因此如果按钮为 false，则不要导入 button.scss

【解决方案1】：

就我而言，我想导入 rtl bootstrap，所以我添加了一个选择器来切换导入。您将需要一种向 html 标记添加自定义属性的方法。

然后在您的 style.scss 中使用自定义属性选择器包装导入，例如：

[dir='rtl'] {
  @import '~bootstrap/dist/css/bootstrap.rtl.min';
}

【讨论】：