Next.js: Import Global Stylesheets / Script Files

20th August 2020 at 2:19pm
Next.js

Next.js 提供了两种机制让你加入全局的 CSS (或 SASS) 或者 JS 文件。

第一种是使用 pages/_app.js,描述在 这里。它仅能导入 CSS / SASS,无法导入 JS 文件。我不太喜欢这种方案。但是 Next.js 强制要求全局 CSS / SASS 只能通过这种方式加入。

第二种是使用 next/head。不可用于导入 CSS,可导入 JS。可以写一个被每个页面所使用的公共 Meta 组件,然后在各页面使用它:

  1. pages/base/Meta.tsx 中写入:
    import React from "react";
    
    import Head from 'next/head'
    
    const Meta = () => (
      <Head>
        <script src="/js/font-awesome/all.min.js"></script>
      </Head>
    )
    
    export default Meta

    这样会导入 Font-Awesome 的 JS 文件。

  2. 在各页面使用它,比如:
    import React from "react";
    import Meta from "pages/base/Meta";
    
    class IndexPage extends React.Component<any, any> {
      render() {
        return <div>
          <Meta/>
          {# ... #}
        </div>
      }
    }
    
    export default IndexPage

See Also

导入 SASS 的初始设置在 Next.js: Import SASS File