我正在使用 NextJS (https://nextjs.org/) 版本 9.0.6。
我的 next.config.js 看起来像这样：
/* eslint-disable */
const withLess = require("@zeit/next-less");
const lessToJS = require("less-vars-to-js");
const fs = require("fs");
const path = require("path");
// Where your antd-custom.less file lives
const themeVariables = lessToJS(
fs.readFileSync(path.resolve(__dirname, "./assets/antd-custom.less"), "utf8")
);
module.exports = withLess({
lessLoaderOptions: {
javascriptEnabled: true,
modifyVars: themeVariables // make your antd custom effective
},
webpack: (config, {
isServer,
defaultLoaders
}) => {
const originalEntry = config.entry;
config.entry = async() => {
const entries = await originalEntry();
if (
entries["main.js"] &&
!entries["main.js"].includes("./polyfills.js")
) {
entries["main.js"].unshift("./polyfills.js");
}
return entries;
};
config.module.rules.push({
test: /\.scss$/,
use: [
defaultLoaders.babel,
{
loader: require("styled-jsx/webpack").loader,
options: {
type: "scoped",
javascriptEnabled: true
}
},
"sass-loader"
]
});
if (isServer) {
const antStyles = /antd\/.*?\/style.*?/;
const origExternals = [...config.externals];
config.externals = [
(context, request, callback) => {
if (request.match(antStyles)) return callback();
if (typeof origExternals[0] === "function") {
origExternals[0](context, request, callback);
} else {
callback();
}
},
...(typeof origExternals[0] === "function" ? [] : origExternals)
];
config.module.rules.unshift({
test: antStyles,
use: "null-loader"
});
}
return config;
}
});我的 package.json 看起来像这样：
{
"name": "test",
"version": "0.0.1beta",
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start",
"export": "next export"
},
"dependencies": {
"@material/react-chips": "^0.15.0",
"@zeit/next-less": "^1.0.1",
"antd": "^3.24.3",
"babel-plugin-import": "^1.12.2",
"less": "3.10.3",
"less-vars-to-js": "1.3.0",
"next": "9.0.6",
"null-loader": "3.0.0",
"react": "^16.11.0",
"react-country-flag": "^1.1.0",
"react-device-detect": "^1.9.10",
"react-dom": "^16.11.0",
"react-proptypes": "^1.0.0",
"react-redux": "^7.1.1",
"react-string-replace": "^0.4.4",
"redux": "^4.0.4",
"redux-devtools-extension": "^2.13.8",
"redux-persist": "^6.0.0"
},
"devDependencies": {
"babel-eslint": "^10.0.3",
"eslint": "^6.6.0",
"eslint-config-airbnb": "^18.0.1",
"eslint-plugin-babel": "^5.3.0",
"eslint-plugin-import": "^2.18.2",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-react": "^7.16.0",
"node-sass": "^4.13.0",
"prettier": "^1.18.2",
"prettier-eslint": "^9.0.0",
"sass-loader": "8.0.0"
},
"license": "ISC"
}我做了什么：
-删除了 out 和 .next 文件夹。
然后：
yarn build
yarn export
页面将会生成，但它们已损坏（CSS 未加载，没有 Javascript）。
这在项目开始时有效，但事实并非如此。
有人知道为什么它会被破坏吗？
我刚刚遇到了同样的问题并提出了这个问题。 我认为塔哈正确地解释了这个问题，但对我来说，
next.config.jsmodule.exports = {
assetPrefix: './'
}
该主题也在 NextJS 文档中进行了描述。
我遇到同样问题时遇到了这个问题，我已经弄清楚了。
在您的
index.htmloutlink<link
rel="preload"
href="/_next/static/css/d849fb1b42015bc13208.css"
as="style"
/>
<link
rel="stylesheet"
href="/_next/static/css/d849fb1b42015bc13208.css"
data-n-g=""
/>只需在
.href<link
rel="preload"
href="./_next/static/css/d849fb1b42015bc13208.css"
as="style"
/>
<link
rel="stylesheet"
href="./_next/static/css/d849fb1b42015bc13208.css"
data-n-g=""
/>这为我解决了问题。
我不知道为什么默认情况下不包含“
.我最近在尝试导出应用程序的静态版本时遇到了同样的问题，并且很惊讶地发现 Next.js 存储库上最近没有关于该问题的问题。
实际上，当通过 Web 服务器运行时，使用 CSS/Js 文件的绝对路径可以正常工作。当在浏览器中作为本地文件运行时，您必须自己将它们更改为相对路径。
至于为什么 Next.js 团队不提供使用本地路径导出的选项，Tim Neutkens（首席维护者）在本期中表示“这将涉及大量工作，但收益却非常小”。
如果您使用 VS Code 和 liveserver，问题是 liveserver 在需要将根目录设置为
out这是您可以为每个工作区设置的设置。
设置 Live Server 的自定义根目录。 要将服务器的根目录更改为工作区的子文件夹，请使用“/”和工作区的相对路径。 示例：/子文件夹1/子文件夹2
然后在工作区 settings.json 中我有：
{
"liveServer.settings.root": "/out"
}
除了 @Philipp Schemels 的回答，如果有人通过 FontSource 和 StyledComponents 使用自定义字体，构建的 CSS 文件将不会指向正确的字体文件，您将必须手动更改这些 URL，
浏览器控制台应该打印一个描述性错误，您可以使用它来识别导致问题的 CSS 文件。自定义字体通常放在
out/_next/static/media我在构建 Github Pages 时遇到了这个问题。 我尝试在 next.config.js 中应用
assetPath: "."我通过将
style.css<link rel="style" href="style.css" />
没有 CSS 我在 next.js 14.0.3 上构建（npm run build） 在index.html 中，添加“.”在 href 中并删除 crossorigin="" 属性然后工作！ 例子： 之前：
后：