我正在使用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,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)。
这在项目开始时有效,但是不行。
这里有人知道为什么会损坏它吗?