CSS file import broken

[poka93]

Antd theming is working 🥳 but I am not able to import CSS files from node modules anymore, some of them are broken (the ones that use url()).

In my Nextjs app there is Antd with less for theme and I am using leaflet react but I am having the following error during build:

Error during build

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```
because I am importing the `import "leaflet/dist/leaflet.css";` in `_app.tsx `

I tried to configure the cssLoaderOptions in next.config.js but couldn't fix it by adding url: true (it is already set to true by default 🤷‍♂️). Any documentation on how to do it please.

next.config.js

const withNextTranslate = require('next-translate'); const withAntdLess = require('next-plugin-antd-less');

module.exports = withNextTranslate(withAntdLess({ lessVarsFilePath: "./styles.antd.less", // optional lessVarsFilePathAppendToEndOfContent: false, // optional https://github.com/webpack-contrib/css-loader#object cssLoaderOptions: {}, images: { domains: ["storage.googleapis.com"], },

webpack(config) { return config; } }));

[Bigood]

Same situation here with leaflet, after using withAntdLess. You missed the important line on your error log, just above Module parse failed…. Mine is :

./node_modules/leaflet/dist/images/layers-2x.png

On next.config.js, update your webpack configuration to load images (ref, assuming webpack 5)

  webpack: (config, options) => {
    config.module.rules.push(
      {
        test: /\.(png|jpg|jpeg|gif)$/i,
        type: 'asset/resource',
        //Output in static folder, otherwise you won't be served, thus no access from css url() 
        //https://stackoverflow.com/a/68537419/1437016
        generator: {
          filename: 'static/[name].[ext]',
        }
      }
    );

    // Returns the customized Next.js configuration
    return config;
  },