Question

您是nextjs的新用户。

当我在页面文件夹中创建的页面中使用导入css文件时，第一次加载时没有加载，必须重新加载才能看到它，以及在getInitialProps中调用api时

next.config.js

const withCSS = require('@zeit/next-css');
const withSass = require('@zeit/next-sass');
// const withImages = require('next-images');
// module.exports = withImages()
module.exports = withSass({
    ...withCSS({  
        cssModules: false,
        webpack: function (config) {
            config.module.rules.push({
              test: /\.(eot|woff|woff2|ttf|svg|png|jpg|gif)$/,
              use: {
                loader: 'url-loader',
                options: {
                  limit: 100000,
                  name: '[name].[ext]'
                }
              }
            })
            return config
          }    
    }),
    cssModules: true,

})

// _document.js

import Document, { Head, Main, NextScript } from "next/document";

export default class MyDocument extends Document {
  render() {
    return (
      <html>
        <Head>
          <link rel="stylesheet" href="/_next/static/style.css" />

           <link rel="stylesheet" href="/public/css/fontAwsome/all.min.css" /> 
          <link
            rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css"
            integrity="sha256-+N4/V/SbAFiW1MPBCXnfnP9QSN3+Keu+NlB+0ev/YKQ="
            crossorigin="anonymous"
          />

          <link
            rel="stylesheet"
            href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css"
          />
        </Head>
        <body dir="rtl" className="text-right">
          <Main />
          <NextScript />
        </body>
      </html>
    );
  }
}

Answer 1

您正在将对象与功能合并在一起 next.config.js ，它将解析回调中的回调，一个更简单的示例将是

const withSass = require('@zeit/next-sass');
const withCSS = require("@zeit/next-css");
module.exports = withCSS(withSass({
    webpack(config, options) {
        config.module.rules.push({
            test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
            use: {
                loader: 'url-loader',
                options: {
                    limit: 100000
                }
            }
        });

        return config;
    }
}));

您需要将其导出为withCSS(withSass({ // Config }))

快乐编码！

为什么我在第一次加载时在nextjs中什么都没得到（getInitialProps中的css和params）

1 个答案: