我正在使用webpack5构建一个示例Nextjs应用程序，对于UI，我使用Antd框架。我根本看不到这些样式的应用。当我进入开发工具时，我确实看到ant类应用于按钮，但它们没有样式。这是我的文件：
globals.less:
@import 'antd/dist/antd.less';
_app.js:
import "../styles/globals.less";
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}
export default MyApp
next.config.js：(用于提供加载程序和使用webpack5(
module.exports = {
future: {
webpack5: true,
},
webpack: (config, options) => {
config.module.rules.push({
test: /.less$/,
use: [
{
loader: "css-loader", // translates CSS into CommonJS
},
{
loader: "less-loader", // compiles Less to CSS
options: {
lessOptions: {
// If you are using less-loader@5 please spread the lessOptions to options directly
modifyVars: {
"primary-color": "#1DA57A",
"link-color": "#1DA57A",
"border-radius-base": "2px",
},
javascriptEnabled: true,
sourceMap: true,
},
},
},
],
});
return config;
},
};
index.js:
import { Button } from 'antd'
import Head from 'next/head'
export default function Home() {
return (
<div>
<Head>
<title>Create Next App</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<main >
<h1 >
Welcome to Nextjs
</h1>
<div>
<Button type="primary">Primary Test</Button>
</div>
</main>
</div>
);
}
package.json:
{
"name": "hello",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start"
},
"dependencies": {
"@zeit/next-less": "^1.0.1",
"antd": "^4.15.2",
"babel-plugin-import": "^1.13.3",
"css-loader": "^5.2.4",
"less": "^4.1.1",
"less-loader": "^8.1.1",
"next": "10.1.3",
"react": "17.0.2",
"react-dom": "17.0.2"
},
"devDependencies": {}
}
当我通过开发工具查看页面时，我甚至看不到脚本标记。
编辑：对于任何在less文件的路径中使用~的人，请注意，从8.0.0版本开始，它已经被取消了缓存。以下是到变更日志的链接：https://github.com/webpack-contrib/less-loader/blob/master/CHANGELOG.md
在less-loaderv8.0.0之前，您需要将~添加到antd.less导入中，以告知webpack加载程序从node_modules目录解析导入。
@import '~antd/dist/antd.less';