如何在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引导程序，所以我添加了一个选择器来切换导入。您将需要一种方法来向html标记添加自定义属性。

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

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

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

Answer 2

javascript import语句必须出现在顶层，但是import(("函数"；可能正是你想要的。

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