Next-plugins: Module parse failed: Unexpected character '@' (1:0)

[giva9712]

when I import "react-multi-carousel/lib/styles.css", It shows error below:

./node_modules/react-multi-carousel/lib/styles.css 1:0
Module parse failed: Unexpected character '@' (1:0)

Here is next.config.js that I am using:

require("dotenv").config();
const lessToJS = require("less-vars-to-js");
const fs = require("fs");
const path = require("path");
const withSass = require("@zeit/next-sass");
const withLess = require("@zeit/next-less");
const withCSS = require("@zeit/next-css");
const withFonts = require("next-fonts");
const withPlugins = require("next-compose-plugins");

// Where your antd-custom.less file lives
const themeVariables = lessToJS(
  fs.readFileSync(
    path.resolve(__dirname, "./assets/less/variables.less"),
    "utf8"
  )
);

const nextConfig = {
  env: {
    spaceID: process.env.spaceID,
    accessTokenDelivery: process.env.accessTokenDelivery
  },
  distDir: ".next",
  webpack: (config, options) => {
    // modify the `config` here

    return config;
  }
};

const plugins = [
  [
    withCSS,
    {
      cssModules: true,
      cssLoaderOptions: {
        url: false
      }
    }
  ],
  [
    withSass,
    {
      cssModules: true,
      cssLoaderOptions: {
        url: false,
        importLoaders: 1,
        localIdentName: "[local]___[hash:base64:5]"
      }
    }
  ],
  [
    withLess,
    {
      cssModules: true,
      lessLoaderOptions: {
        javascriptEnabled: true,
        modifyVars: themeVariables
      },
      webpack: (config, { isServer }) => {
        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, request, callback);
              } else {
                callback();
              }
            },
            ...(typeof origExternals[0] === "function" ? [] : origExternals)
          ];
          config.module.rules.unshift({
            test: antStyles,
            use: "null-loader"
          });
        }
        return config;
      }
    }
  ],
  withFonts
];
module.exports = withPlugins(plugins, nextConfig);

[tehfailsafe]

Did you figure this out? Having the same issue with another library declaring @font-face

[ghost]

any news for this? not working when import less file on another less file

[sabermazoji]

Does anyone fix this?

[dedsinon]

I can't find a fix on this.

[adrianhulparu]

Hi all, I've had a similar problem migrating a project into NextJs, while trying to support css, scss and less imports (for rsuitejs). What solved it for me is moving the css plugin at the end of the plugins array.

[benwinding]

_After a few hours of trying to get less/sass to work_

Looks like nextjs have deprecated the next-sass/less/css plugins, in favour of an automatic css handled solution (more details).

This means if you use one of the following plugins within next.config.js:

const withSass = require('@zeit/next-sass');
const withLess = require('@zeit/next-less');
const withCSS = require('@zeit/next-css');

You will get the following error:

Warning: Built-in CSS support is being disabled due to custom CSS configuration being detected.

So basically you need to:

• Remove deprecated css plugins (as mentioned above)
• Configure postcss.config.js to handle the css files you need
• Upgrade to next 10.x for automatic styles handling

[timneutkens]

Hi, thanks for creating an issue. We currently recommend using https://nextjs.org/docs/basic-features/built-in-css-support as zeit/next-css and zeit/next-sass have been deprecated in favor of the built-in support.