由于意外字符，在 nextJs for antd 中使用 less 的 Webpack 设置失败

编程问答 2022-05-30

问题描述

我在我的 NextJS 项目中使用 antd 并且想要自定义主题。所以我试图更新我的 next.config.js 来做到这一点。这就是我所做的：

const webpack = require('webpack');
const withLess = require("@zeit/next-less");
const lesstoJS = require("less-vars-to-js");
const fs = require("fs");
const path = require("path");
require('dotenv').config();

const themeVariables = lesstoJS(
    fs.readFileSync(path.resolve(__dirname,"./assets/antd-custom.less"),"utf8")
);

module.exports = withLess({
    lessLoaderOptions: {
        javascriptEnabled: true,modifyVars: themeVariables,},distDir: '../.next',webpack: config => {
        const env = Object.keys(process.env).reduce((acc,curr) => {
            acc[`process.env.${curr}`] = JSON.stringify(process.env[curr]);
            return acc;
        },{});

        config.resolve.modules.push(path.resolve('./'));
        config.plugins.push(new webpack.DefinePlugin(env));

        return config;
    },sassOptions: {
        includePaths: [path.join(__dirname,'styles')],});

然而，当我启动我的开发服务器时，它似乎是这样的：

ready - started server on http://localhost:3000
Warning: Built-in CSS support is being disabled due to custom CSS configuration being detected.
See here for more info: https://err.sh/next.js/built-in-css-disabled

error - ./public/css/AppContainer.css 1:0
Module parse Failed: Unexpected character '#' (1:0)
You may need an appropriate loader to handle this file type,currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> #root,html,body {
|     width: 100%;
|     height: 100%;

我的 antd-custom.less 仅包含以下内容：

@primary-color: #1f5257;

有谁知道这意味着什么或我如何追踪问题？

我确实有一个 AppContainer.css 对某些事物具有 # 值，但不确定为什么会出现问题？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

antdantdantdlesswebpackwebpackwebpack