url()s fail to load files

elado commented 3 years ago

// next.config.js
const withAntdLess = require("next-plugin-antd-less");
module.exports = withAntdLess({});

// styles/foo.less
body { background-image: url("../images/img.jpg"); }

// pages/_app.js
import "../styles/foo.less";

Error:

error - ./images/img.jpg 1:0
Module parse failed: Unexpected character '�' (1:0)

Similar for font files.

This does not happen in .css files.

Expectation: use the built in file-loader for url() refs from .less files.

Workaround: add this custom loader with a specified issuer:

  webpack(config, nextConfig) {
    config.module.rules.push({
      test: /\.(jpe?g|png|gif|svg|ttf|woff2?|eot)$/,
      issuer: /\.less$/,
      use: {
        loader: require.resolve("next/dist/compiled/file-loader"),
        options: {
          name: "static/media/[name].[hash].[ext]",
        },
      },
    });
    return config;
  },

SolidZORO commented 3 years ago

demo https://mkn-79mr1j3yg-solidzoro.vercel.app/test

So-For commented 2 years ago

I configured next.config.js as the questioner did, but it didn't work Console error:

Error: Cannot find module 'next/dist/compiled/file-loader'

SolidZORO / next-plugin-antd-less

url()s fail to load files #39