Web*_*urk 5 javascript sass node.js next.js next.js13
我正在使用 NextJS v.13 构建一个前端应用程序，这将是一个可供多个站点使用的通用前端代码库。
我希望有：
当我为site1构建代码库时，我想以某种方式告诉应用程序在构建时使用button.site1.css。
基本上我想实现以下目标：
.env.local
HOST_NAME=site1
关于.js
import styles from `./Button.${process.env.HOST_NAME}.scss`; // This doesn't work. "Imports must be string literals"
const About = () => {
<div>
<h1 className={styles.h1}">About Page</h1>
</div>
)
}
尽管 @Felix Ekl\xc3\xb6f 推荐了一种非常好的方法，即以编程方式重命名文件。这里有一些更简单、更合适、更方便的东西。
\n只需将两种样式导入组件中，然后根据.env文件中的变量使用所需的样式即可。Next.js 会自动对未使用的额外类进行 tree-shake，因此您不必担心生产中的性能或使生产具有大量 CSS。
import styles1 from "your-styles1.module.scss";\nimport styles2 from "your-styles2.module.scss";\n\nconst styles = process.env.HOSTNAME === "host1" ? styles1 : styles2;\n非常简单并且更容易实施。正确的？
\n如果您正在寻找有条件地添加全局样式。请改用linkinside next/head。\n首先，将样式放入public目录中。然后，用你的_app.jsx
// do not import global styles that are scopped to specific HOST, \n\nexport default function(...) {\n const styleSheetLink = getStyleSheetLink(process.env.HOSTNAME) // some logic to detect appropreate stylesheet.\n...\n return (\n <>\n <Head>\n <link href={styleSheetLink} .../>\n </Head>\n ...\n </>\n )\n...\n}\n要启用 CSS 优化，您需要安装critters并启用 CSS 优化。
// next.config.js\n...\n experimental: { optimizeCss: true }\n...\n}\n和
\nyarn add critters\n