Next.js组件中如何通过styled-jsx引入多个全局样式文件

正确实现方案 #

你尝试的两种方案不生效的核心原因：

• 第一种写法里的逗号是JS逗号运算符，只会返回最后一个secondStylesheet的值，第一个样式直接被丢弃
• 第二种写法多<style>标签不生效一般是styled-jsx旧版本的兼容问题，或者样式优先级冲突被覆盖

方案1：拼接样式字符串（最适配你当前写法） #

直接将两个导入的样式变量拼接为一个字符串传入同一个<style global jsx>标签即可：

import stylesheet from '../src/styles/first.scss';
import secondStylesheet from '../src/styles/second.scss';

return (
  <Layout>
    <style global jsx>{`
      ${stylesheet}
      ${secondStylesheet}
    `}</style>
    其余业务代码
  </Layout>
)

如果不习惯模板字符串，也可以用加号拼接：{stylesheet + secondStylesheet}

方案2：使用Next.js原生全局样式引入（更推荐） #

如果你不需要运行时动态切换样式，完全可以用Next.js原生支持的全局样式引入方式，不需要额外套<style jsx>标签：

1. 打开项目根目录下的_app.js/_app.tsx文件
2. 直接在顶部导入两个scss文件即可：

// _app.js
import '../src/styles/first.scss';
import '../src/styles/second.scss';

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />
}

注意：Next.js默认不允许在非_app.js的组件中导入全局样式，如果你需要在业务组件内单独引入全局样式，还是用方案1即可。

内容的提问来源于stack exchange，提问作者user1941537