css-loader: Module build failed: Unknown word (5:1)

In my case, the problem was the order of the loaders. I changed this:

module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'css-loader',
          'style-loader'
        ]
      }
    ]
  }

to this:

module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }

and it worked.

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.

I had to do this instead:

{
        test: /\.css$/,
        loader: 'style-loader'
}

@michael-ciniawsky don’t know about support in webpack 1. But in webpack 2 you can use

require('./index.css'); // add `link`
var exportedStyles = require('!!css-loader!./index.css'); // just export

console.log(exportedStyles.toString()); // Here we have string with all styles from `index.css`

or with import

import './index.css';
import exportedStyles from '!!css-loader!./index.css';

console.log(exportedStyles.toString()); // Here we have string with all styles from `index.css`

/cc @michael-ciniawsky we can close this issue Also i am bad in documentation and very bad in documentation in english, maybe you can do PR with example in README.md about this 😄

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

this worked for me
{ test: /\.scss$/, use: [ { loader: "style-loader" }, { loader: "css-loader", }, ] }

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')]
}

I was also facing this issue with storybook webpack config , and before pushing the rules I do:

 // Remove existing style-loader rule
config.module.rules = config.module.rules.filter(x => x.test.test && !x.test.test('file.css'));

And then push my css-modules rules, inspired by https://github.com/storybookjs/storybook/issues/2320:

config.module.rules.push({
      test: /\.css$/,
      use: [
          { loader: require.resolve('style-loader') },
          {
              loader: require.resolve('css-loader'),
              options: {
                  importLoaders: 1,
                  modules: {
                      mode: 'local',
                      localIdentName: '[path][name]__[local]--[hash:base64:5]',
                      // localIdentName: '[sha1:hash:hex:4]',
                      context: path.resolve(__dirname, 'src'),
                      hashPrefix: 'my-custom-hash',
                  },
              },
          }
      ]
  })

I was facing this issue with storybook webpack config , and instead of pushing rules I do :

module.exports = async ({ config }) => {
  config.module.rules = [
    {
      test: /\.js$/, // Transform all .js files required somewhere with Babel
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
      },
    },
    {
      // Preprocess our own .css files
      // This is the place to add your own loaders (e.g. sass/less etc.)
      // for a list of loaders, see https://webpack.js.org/loaders/#styling
      test: /\.css$/,
      exclude: /node_modules/,
      use: ['style-loader', 'css-loader'],
    },
    {
      // Preprocess 3rd party .css files located in node_modules
      test: /\.css$/,
      include: /node_modules/,
      use: ['style-loader', 'css-loader'],
    },
    {
      test: /\.(eot|otf|ttf|woff|woff2)$/,
      use: 'file-loader',
    },
    {
      test: /\.svg$/,
      use: [
        {
          loader: 'svg-url-loader',
          options: {
            // Inline files smaller than 10 kB
            limit: 10 * 1024,
            noquotes: true,
          },
        },
      ],
    },
    {
      test: /\.(jpg|png|gif)$/,
      use: [
        {
          loader: 'url-loader',
          options: {
            // Inline files smaller than 10 kB
            limit: 10 * 1024,
          },
        },
        {
          loader: 'image-webpack-loader',
          options: {
            mozjpeg: {
              enabled: false,
              // NOTE: mozjpeg is disabled as it causes errors in some Linux environments
              // Try enabling it in your environment by switching the config to:
              // enabled: true,
              // progressive: true,
            },
            gifsicle: {
              interlaced: false,
            },
            optipng: {
              optimizationLevel: 7,
            },
            pngquant: {
              quality: '65-90',
              speed: 4,
            },
          },
        },
      ],
    },
    {
      test: /\.html$/,
      use: 'html-loader',
    },
    {
      test: /\.(mp4|webm)$/,
      use: {
        loader: 'url-loader',
        options: {
          limit: 10000,
        },
      },
    },
  ];

  return config;
};

for me, I was repeating it twice like this.

module: {
rules: [
	{
	test: /\.css$/,
	use: [
	        'style-loader',
	        'css-loader'
	],
}, ....
{
	test: /\.(css)$/,
		loader: 'css-loader',
		options: {
		name: '[name].[ext]?[hash]'
	}
}
          

I removed one of them and it worked.

So finally this.

module: {
rules: [
	{
	test: /\.css$/,
	use: [
	        'style-loader',
	        'css-loader'
	], ....

I had the same promlem. I have looked through my package.json. The ‘babel-cli’ was installed. I uninstalled it. It helped.

{ test: /.scss$/, use: [ “style-loader” , “css-loader” ] } It worked for me

+1