Next.js: ERROR in *.css . Module build failed: ValidationError: Style Loader Invalid Options

[geryit]

Can not import css after upgrading to v5

//next.config.js
const withCSS = require('@zeit/next-css')
module.exports = withCSS()

//pages/test.js
import React from 'react';
import './test.css';

export default () => <div className="test">Hello World!</div>;

/*pages/test.css*/
.test{background-color: red;}

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

Have a box with red background

Current Behavior

Seeing this error:

ERROR in ./pages/test.css
Module build failed: ValidationError: Style Loader Invalid Options

options['importLoaders'] should NOT have additional properties

 @ ./pages/test.js 10:0-20
 @ multi ./pages/test.js

Context

I don't have .babelrc and postcss.config.js in my local and trying to import css

Your Environment

| Tech | Version |
|---------|---------|
| next | 5 |
| node |9.5 |
| OS | macOS 10.12.6 |
| browser |chrome Version 64.0.3282.140 |

[windyGex]

The same problem that using next-sass plugin.

ERROR in ./src/styled-components/index.scss
Module build failed: ValidationError: Style Loader Invalid Options

options['importLoaders'] should NOT have additional properties

[timneutkens]

Already made a pr on next-plugins to solve this 🙏🏻

[haikyuu]

@timneutkens thanks ❤️ . Was it merged? how can i use it?

[timneutkens]

@haikyuu Will do a new release soon with a lot of improvements to next-css / less / sass

[OmarZeidan]

Any updates on this? I still get the same error.

• "next": "^7.0.2",
• "@zeit/next-css": "^1.0.1",

[vladimirlukyanov]

Same here

[zivanovicb1]

+1

[njiyto]

+1 - it's still a problem

• "@zeit/next-css": "^1.0.1",
• "next": "^7.0.2",

const withCSS = require('@zeit/next-css');
module.exports = withCSS();

Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/css-loader/dist/cjs.js):
ValidationError: CSS Loader Invalid Options
options should NOT have additional properties

[letsspeak]

I met same problem.

% yarn build
$ next build
[1:02:12] Compiling server
[1:02:12] Compiling client
[1:02:14] Compiled server in 2s
[1:02:17] Compiled client in 5s
> Failed to build
{ Error: (client) ./components/font.scss
Module build failed (from ./node_modules/@zeit/next-css/node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/css-loader/dist/cjs.js):
ValidationError: CSS Loader Invalid Options

options should NOT have additional properties

And it solved with following command

yarn remove style-loader css-loader sass-loader

[mockee]

+1

• next v7.0.2
• @zeit/next-css v1.0.1
• next-compose-plugins v2.1.1

---

[update] remove css-loader can solve this problem.

[webberwang]

[schabluk]

yarn add @zeit/next-css@next

[imakan]

我遇到了同样的问题。

% yarn build
$ next build
[1:02:12] Compiling server
[1:02:12] Compiling client
[1:02:14] Compiled server in 2s
[1:02:17] Compiled client in 5s
> Failed to build
{ Error: (client) ./components/font.scss
Module build failed (from ./node_modules/@zeit/next-css/node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/css-loader/dist/cjs.js):
ValidationError: CSS Loader Invalid Options

options should NOT have additional properties

它用以下命令解决了

yarn remove style-loader css-loader sass-loader

thx，resolve my problem