css-loader: Unknown word error when loading plain CSS (not Sass or Less)

I seem to figure this out. According to webpack docs there are multiple ways to use loaders.

explicit in the require statement
configured via configuration
configured via CLI

If use require statement to specify the loaders, e.g.require("style!css!../styles/site.css"), you don’t need to configure css-loader in webpack.config.js.

On the contrary, if already configured css-loader in webpack.config.js, you should use require("../styles/site.css") or import "../styles/site.css".

These problems may caused by specify loaders both in require and webpack.config.js.

I had the same issue too.

bundle.js:15842 Uncaught Error: Cannot find module "!!./../../node_modules/css-loader/index.js!./../../node_modules/style-loader/index.js!./../../node_modules/css-loader/index.js!./home.css"

vendor.js:160 ./~/css-loader!./~/style-loader!./~/css-loader!./css/home/home.css Module build failed: CssSyntaxError: F:\css-loader!F:\work\memberUserCenterFrontend\node_modules\style-loader\index.js!F:\work\memberUserCenterFrontend\node_modules\css-loader\index.js!F:\work\memberUserCenterFrontend\css\home\home.css:5:1: Unknown word at Input.error (F:\work\memberUserCenterFrontend\node_modules\css-loader\node_modules\postcss\lib\input.js:61:22) at Parser.unknownWord (F:\work\memberUserCenterFrontend\node_modules\css-loader\node_modules\postcss\lib\parser.js:457:26) at Parser.word (F:\work\memberUserCenterFrontend\node_modules\css-loader\node_modules\postcss\lib\parser.js:174:14) at Parser.loop (F:\work\memberUserCenterFrontend\node_modules\css-loader\node_modules\postcss\lib\parser.js:60:26) at parse (F:\work\memberUserCenterFrontend\node_modules\css-loader\node_modules\postcss\lib\parse.js:26:12) at new LazyResult (F:\work\memberUserCenterFrontend\node_modules\css-loader\node_modules\postcss\lib\lazy-result.js:61:24) at Processor.process (F:\work\memberUserCenterFrontend\node_modules\css-loader\node_modules\postcss\lib\processor.js:34:16) at processCss (F:\work\memberUserCenterFrontend\node_modules\css-loader\lib\processCss.js:188:11) at Object.module.exports (F:\work\memberUserCenterFrontend\node_modules\css-loader\lib\loader.js:24:2) @ ./~/style-loader!./~/css-loader!./css/home/home.css 4:14-162

But the strange thing is, if I configure loader include a not exist path, It just work fine.

module: {
        loaders: [
            {
                test: /\.css$/,
                include: [
                    path.resolve(__dirname, "not_exist_path")
                ],
                loader: "style!css"
            }

I had the same issue. I think in generally this error happens when the file is compiled by the css loader for more than once. Check your config to see if there are duplicated css loaders.

I switched from use: [ 'css-loader', 'style-loader' ] to use: ['style-loader', 'css-loader'](note the order) and all is well in the world. Weird.

I fixed it by remove { test: /\.css$/, loader: 'style!css' } from webpack.config.js

For whatever reason, I gave myself a couple of hours to continuously uninstall style-loader, css-loader and webpack and trying the versions form Dec 2015 and failing to solve the issue, I also ran npm cache clean, a couple of times in between.

For the 5th time, I just installed webpack, css-loader and style-loader in that order (same as I did the very first time) and voila, it just worked. Absolutely no idea why it failed the first time and succeeded the nth time. (things done in the same). (Throughout this ordeal, I had no other npm packages in my project other than webpack and the two loaders.)

May be someone should close it, or look at it, or whatever…

As of Storybook v5 there is no need to add custom .css loader as it is already defined. If you are getting an error after upgrade from v4 you should most probably review your .storybook/webpack.config.js and remove custom .css loader.

Yes, tks for pointing to the right direction, reproduce here if anyone encounter it:

const path = require('path')

// See https://github.com/storybooks/storybook/issues/5941#issuecomment-471174523
// See https://stackoverflow.com/questions/55119427/can-i-use-css-modules-with-storybook-5-react-flavour

module.exports = async ({ config, mode }) => {
  // `mode` has a value of 'DEVELOPMENT' or 'PRODUCTION'

  config.module.rules = config.module.rules.filter(
    rule => rule.test.toString() !== '/\\.css$/'
  )

  // SASS and CSS Module support
  config.module.rules.push({
    test: /\.(css|scss)$/,
    use: [
      'style-loader',
      {
        loader: 'css-loader',
        options: {
          sourceMap: true,
          modules: true,
          importLoaders: 2,
          localIdentName: '[name]__[local]___[hash:base64:5]'
        }
      },
      'postcss-loader',
      'sass-loader'
    ],
    include: path.resolve(__dirname, '../')
  })

  return config
}

In our application using Storybook webpack I have fixed this issue by using this code:

config.module.rules = config.module.rules.filter(rule => rule.test.toString().indexOf('css') == -1);

In order to make it work just add exclude: /\.css$/, to the existing rule and then add your own code. You may write something like this (this exact code may not work, but it should be easy to fix if required):

const rule = config.modules.rules.filter(rule => rule.test.indexOf('css') > -1);
rule.exclude = /\.css$/;

Additionally from the docs,

It’s possible to overwrite any loaders in the configuration by prefixing the entire rule with !. require(“!style!css!less!bootstrap/less/bootstrap.less”); … If configuration has some transforms bound to the file, they will not be applied.

In my case, I accidentally had the same loader twice. For example:

		// CSS
		{
			test: /\.css$/,
			loaders: [
				'style-loader',
				'css-loader',
			]
		},

                // ....

		// CSS
		{
			test: /\.css$/,
			loaders: [
				'style-loader',
				'css-loader',
			]
		},

Removing one worked, so it isn’t applied twice.

This issue is the very high in google, so posting here, maybe helps somebody.

Got the same even now by using ‘css-loader’ before ‘style-loader’. E.g.

 use: [
          'style-loader',
          'css-loader',
        ],

works, but not

 use: [
          'css-loader',
          'style-loader',
        ],

Hey guys, I actually found that if you change the order of your loaders that fix the problem. I used to have css-loader first and style-loader second inside the array but when i switch them it worked.

        test: /\.css$/,
        use: [
            'style-loader',
            'css-loader',
            'sass-loader'    
        ]

Spent hours, I just fixed it…shit…when using the vue-cli webpacktemplate， the dev webpack config file (build/webpack.dev.conf.js) line 16-18 ：

module: {
  rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })
}

replace with config like:

[
  {
        test: /\.css$/,
        use: [
          'style-loader',
          { loader: 'css-loader', options: { importLoaders: 1 } },
          'postcss-loader'
        ]
   }
]

the whole build/webpack.dev.conf.js is:

var utils = require('./utils')
var webpack = require('webpack')
var config = require('../config')
var merge = require('webpack-merge')
var baseWebpackConfig = require('./webpack.base.conf')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')

// add hot-reload related code to entry chunks
Object.keys(baseWebpackConfig.entry).forEach(function (name) {
  baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name])
})

module.exports = merge(baseWebpackConfig, {
  // module: {
  //   rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })
  // },
  // cheap-module-eval-source-map is faster for development
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          { loader: 'css-loader', options: { importLoaders: 1 } },
          'postcss-loader'
        ]
      }
    ]
  },
  devtool: '#cheap-module-eval-source-map',
  plugins: [
    new webpack.DefinePlugin({
      'process.env': config.dev.env
    }),
    // https://github.com/glenjamin/webpack-hot-middleware#installation--usage
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),
    // https://github.com/ampedandwired/html-webpack-plugin
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true
    }),
    new FriendlyErrorsPlugin()
  ]
})

According to the most recent docs on GitHub, the preferred syntax is: { test: /\.css$/, use: [ { loader: 'style-loader' }, { loader: 'css-loader' } ], exclude: /node_modules/ }

Please avoid my mistake and take serious note of you potentially having two loaders for the same thing.

I was loading CSS myself, and had a 3rd party plugin that also loaded CSS, so I didn’t immediately think about it.

Removing my loader made this work.

If it might help someone sometime, I was playing with types importing react-scripts. I didnt need that, but the addition to it caused this error for me. Removal, and voila, it worked. Now to tell my PM why it’s taken me so long haha

This issue is the very high in google, so posting here, maybe helps somebody. Got the same even now by using ‘css-loader’ before ‘style-loader’. E.g.

 use: [
          'style-loader',
          'css-loader',
        ],

works, but not

 use: [
          'css-loader',
          'style-loader',
        ],

do you know why this order happens? in my understanding, style-loader will take all the css it finds generated by css-loader and inject to html. So that meas css-loader will work for us first. It’s a little bit wierd to put it in reverse oreder in our config. But it really works. just don’t know why.

Vow after hours of struggling with this issue finally writing style-loader above css-loader worked thanks a lot

But what if I want to have “style.module.css” and is not using SASS?

I have to add custom .css loader for Storybook v5 right? Like so (but it is not working):

module.exports = async ({ config, mode }) => {
  // SASS and CSS Module support
  config.module.rules.push({
    test: /\.css$/,
    use: [
      'style-loader',
      {
        loader: 'css-loader',
        options: {
          sourceMap: true,
          modules: true,
          importLoaders: 1,
          localIdentName: '[name]__[local]___[hash:base64:5]'
        }
      },
      'postcss-loader'
    ],
    include: path.resolve(__dirname, '../')
  })

  return config
}

@splurtcake maybe you should config like this: { test: /.scss$/, loader: ExtractTextPlugin.extract( ‘style-loader’, ‘css-loader!postcss-loader’, ‘sass-loader’ ) }