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

Question

我正在尝试根据环境加载样式表_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 做到这一点有什么想法吗？

Answer 1

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

如果您使用 Next，我推荐 nextjs 自定义文档：https://nextjs.org/docs/advanced-features/custom-document

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

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