Module build failed: Unknown word (5:1)

[metabacalhau]

When I try to load CSS like so require('css!./file.css'); I receive an error:

ERROR in ./~/css-loader!./file.css
Module build failed: Unknown word (5:1)
  3 | // load the styles
  4 | var content = require("!!./../../../node_modules/css-loader/index.js!./file.css");
> 5 | if(typeof content === 'string') content = [[module.id, content, '']];
    | ^
  6 | // add the styles to the DOM
  7 | var update = require("!./../../../node_modules/style-loader/addStyles.js")(content, {});
  8 | if(content.locals) module.exports = content.locals;

Content of the CSS file:

body {
}

Here is a complete sample:
https://gist.github.com/desperate-man/50e522139734934b287382cf63e534af

However if I load the CSS file like this require('style!./file.css'); or this require('./file.css'); I have no errors. Is require('css!'); supposed to work or not? I use version 0.25.0.

[dphov]

+1

[uhinze]

I had the same error, "style!" didn't help though. I'm using Angular2 Webpack Starter, turned out the issue was caused by unmatching include/exclude directories in webpack.common.js (css to-string-loader) and webpack.dev.js (css style-loader). So the erroneous config was:

{
test: /\.css$/,
use: ['to-string-loader', 'css-loader'],
exclude: [helpers.root('src', 'styles')]
}

{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
include: [helpers.root('src', 'assets')]
}

Exchanged that by:

{
test: /\.css$/,
use: ['to-string-loader', 'css-loader'],
exclude: [helpers.root('src', 'assets')]
}

{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
include: [helpers.root('src', 'assets')]
}

[chanon]

I have this exact same error in webpack2 + css-loader, adding !css-loader or !style-loader or not does not help at all. Does anyone know why it might be happening or what can cause this kind of error?

EDIT: Now I know, I was trying to use it with vue the wrong way: http://stackoverflow.com/questions/37031123/why-am-i-not-being-able-to-compile-sass-with-webpack

[michael-ciniawsky]

@desperate-man @uhinze @chanon Please provide a CSS file aswell, maybe related to #355

[metabacalhau]

@michael-ciniawsky https://gist.github.com/desperate-man/50e522139734934b287382cf63e534af

[ekulabuhov]

I can confirm the bug, happening on both webpack 1 and 2. Going to investigate.

[ekulabuhov]

Actually here's the problem, loaders are applied twice:
ERROR in ./~/css-loader!./~/style-loader!./~/css-loader!./index.css

Both webpack config and require string is applied when resolving. I think this is as designed.

Solution: either remove the loader from require or from the webpack.config.js.