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

[desperate-man]

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

[desperate-man]

@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.

[alexander-akait]

@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 :smile:

[alexander-akait]

/cc @desperate-man @dphov @uhinze @chanon @desperate-man @ekulabuhov please see comment above :star2:

[michael-ciniawsky]

@evilebottnawi I in a overhaul of the README and will address this 👍

[wolmir]

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.

[mihaiOD]

@wolmir this seems to be the actual fix for this! thanks!

[claysquareninety]

So it seems the readme is all up to date, and by following it I implemented all these fixes, but I'm still seeing this issue:

ERROR  Failed to compile with 3 errors23:03:46             
[1] 
[1]  error  in ./node_modules/bootstrap/dist/css/bootstrap.css
[1] 
[1] Module build failed: Unknown word (5:1)
[1] 
[1]   3 | // load the styles
[1]   4 | var content = require("!!../../../css-loader/index.js?{\"sourceMap\":true}!../../../postcss-loader/lib/index.js?{\"sourceMap\":true}!./bootstrap.css");
[1] > 5 | if(typeof content === 'string') content = [[module.id, content, '']];
[1]     | ^
[1]   6 | if(content.locals) module.exports = content.locals;
[1]   7 | // add the styles to the DOM
[1]   8 | var update = require("!../../../vue-style-loader/lib/addStylesClient.js")("0831cbd4", content, false);
[1] 
[1] 
[1]  @ ./node_modules/bootstrap/dist/css/bootstrap.css 4:14-192 18:2-22:4 19:20-198
[1]  @ ./client/src/main.js
[1]  @ multi (webpack)-dev-server/client?http://localhost:5000 webpack/hot/dev-server ./client/src/main.js
[1] 
[1]  error  in ./node_modules/bootstrap-vue/dist/bootstrap-vue.css
[1] 
[1] Module build failed: Unknown word (5:1)
[1] 
[1]   3 | // load the styles
[1]   4 | var content = require("!!../../css-loader/index.js?{\"sourceMap\":true}!../../postcss-loader/lib/index.js?{\"sourceMap\":true}!./bootstrap-vue.css");
[1] > 5 | if(typeof content === 'string') content = [[module.id, content, '']];
[1]     | ^
[1]   6 | if(content.locals) module.exports = content.locals;
[1]   7 | // add the styles to the DOM
[1]   8 | var update = require("!../../vue-style-loader/lib/addStylesClient.js")("f6bbb946", content, false);
[1] 
[1] 
[1]  @ ./node_modules/bootstrap-vue/dist/bootstrap-vue.css 4:14-184 18:2-22:4 19:20-190
[1]  @ ./client/src/main.js
[1]  @ multi (webpack)-dev-server/client?http://localhost:5000 webpack/hot/dev-server ./client/src/main.js
[1] 
[1]  error  

My main.js looks like this:

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'
import App from './App'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.config.productionTip = false

Vue.use(BootstrapVue);

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

[claysquareninety]

I had to do this instead:

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

[hitolv4]

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

[itsAnuga]

I've tried several combinations, but the only combo that worked for me, was the same as for @claysquareninety

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

All other combinations with css-loader, always gave me an error while compiling.

[niennguyen]

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

[yenin-dev]

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

[yehoan]

i also have but i use all kinds of methods is not use please help....


i not know why just update my webpack

[ng2695]

I m also facing the same problem. Please provide me the solutions.

 const path = require('path');
 const webpack = require('webpack');
 const autoprefixer = require('autoprefixer');
 const precss = require('precss');

const TransferWebpackPlugin = require('transfer-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");


module.exports = {
entry: {
    'bundle.css': [
        path.resolve(__dirname, './src/assets/css/demo.css'),
        path.resolve(__dirname, './src/assets/css/theme.css'),
        path.resolve(__dirname, './src/assets/scss/demo.scss'),
        path.resolve(__dirname, './src/assets/scss/theme.scss')
    ],
    'bundle.js': [
        path.resolve(__dirname, './src/index.js')
    ],
    'common.js': [
        path.resolve(__dirname, './src/assets/js/bootstrap/bootstrap.bundle.js'),
        path.resolve(__dirname, './src/assets/js/bootstrap/bootstrap.js'),
        path.resolve(__dirname, './src/assets/js/demo.js'),
        path.resolve(__dirname, './src/assets/js/theme.js')
    ],
},
output: {
    filename: '[name]',
    path: path.resolve(__dirname, 'dist')
},
module: {
    rules: [
        {
            test: /\.scss$/,
            use: [
                {
                    loader: "css-loader",
                },
                {
                    loader: "style-loader",
                },
                {
                    loader: "postcss-loader",
                    options: {
                        sourceMap: true
                    }
                },
                {
                    loader: "sass-loader",
                    options: {
                        sourceMap: true
                    }
                }
            ]
        },
        {
            // test: /\.css$/,use:[{loader : 'css-loader'}],
            test: /\.css$/, use: [{loader: 'css-loader'}],
        }, {
            test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
            loader: "url?limit=10000&mimetype=application/font-woff"
        }, {
            test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
            loader: "url?limit=10000&mimetype=application/font-woff"
        }, {
            test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
            loader: "url?limit=10000&mimetype=application/octet-stream"
        }, {
            test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
            loader: "file"
        }, {
            test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
            loader: "url?limit=10000&mimetype=image/svg+xml"
        },
        {
            test: /\.js$/,
            use: {
                loader: 'babel-loader',
                options: {
                    presets: ['@babel/preset-env']
                }
            }
        },
        {
            test: /\.(png|jp?g|gif|svg)$/,
            use: [
                'file-loader?name=images/[name].[ext]',
                'image-webpack-loader?bypassOnDebug'
            ]
        },
        {
            test: /bootstrap\/dist\/js\/umd\//, use: 'imports-loader?jQuery=jquery'
        },
        {
            test: /font-awesome\.config\.js/,
            use: [
                {loader: 'style-loader'},
                {loader: 'font-awesome-loader'}
            ]
        },

    ]
},
plugins: [
    new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery",
        "window.jQuery": "jquery",
        "jQuery.tagsinput": "bootstrap-tagsinput"
    }),
    new ExtractTextPlugin("bundle.css"),
    new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery',
        tether: 'tether',
        Tether: 'tether',
        'window.Tether': 'tether',
        Popper: ['popper.js', 'default'],
        'window.Tether': 'tether',
        Alert: 'exports-loader?Alert!bootstrap/js/dist/alert',
        Button: 'exports-loader?Button!bootstrap/js/dist/button',
        Carousel: 'exports-loader?Carousel!bootstrap/js/dist/carousel',
        Collapse: 'exports-loader?Collapse!bootstrap/js/dist/collapse',
        Dropdown: 'exports-loader?Dropdown!bootstrap/js/dist/dropdown',
        Modal: 'exports-loader?Modal!bootstrap/js/dist/modal',
        Popover: 'exports-loader?Popover!bootstrap/js/dist/popover',
        Scrollspy: 'exports-loader?Scrollspy!bootstrap/js/dist/scrollspy',
        Tab: 'exports-loader?Tab!bootstrap/js/dist/tab',
        Tooltip: "exports-loader?Tooltip!bootstrap/js/dist/tooltip",
        Util: 'exports-loader?Util!bootstrap/js/dist/util'
    }),
],
resolve: {
    alias: {
        jquery: "jquery/src/jquery"
    }
}

};

[iamcoolkranthi]

hi my webpack config file

const path = require('path');
const autoPrefixer = require('autoprefixer');
module.exports = {
devtool: 'cheap-module-eval-source-map',
entry:'./scr/index.js',
mode: 'development',
output:{
path:path.resolve(__dirname,'dist'),
filename:"bundel.js",
chunkFilename:'[id]',
publicPath:''
},
resolve:{
extensions:['.js','.jsx']
},
module:{
rules:[
{
test: /.js$/,
loader:'babel-loader',
exclude: [path.resolve(__dirname, 'node_modules')]
},
{
test:/.scss$/,
exclude: [path.resolve(__dirname, 'node_modules')],
use:[
{loader:'style-loader'},
{loader: 'css-loader',
options: {
importLoaders:1,
modules:true,
localIdentName:'[name]__[local]__[hash:based64:5]'}},

              {loader:'postcss-loader',options:{
                  ident: 'postcss',
                  plugins:()=>[
                    autoPrefixer({
                        browsers:[
                            "> 1%",
                            "last 2 versions"
                        ]
                    })

                  ]
              }}
          ]
      },

      {
          test:/\.(png|jpg|gif)$/,
          loader:'url-loader?limit=8000&name=images/[name].[ext]',
          exclude: [path.resolve(__dirname, 'node_modules')]
      }

  ]

}

};

i am getting issue

ERROR in ./scr/components/piza/PizzaImage.css (./node_modules/css-loader/dist/cjs.js??ref--5-1!./node_modules/postcss-loader/src??postcss!./scr/components/piza/PizzaImage.css)
Module build failed (from ./node_modules/css-loader/dist/cjs.js):
TypeError: hash.digest(...).substr is not a function
at E:\reactPlaygroundwebpackmodules\scr\components\piza\PizzaImage.css:3:1
at getHashDigest (E:\reactPlaygroundwebpackmodulesnode_modules\loader-utils\lib\getHashDigest.js:49:43)
at url.replace (E:\reactPlaygroundwebpackmodulesnode_modules\loader-utils\lib\interpolateName.js:68:47)
at String.replace ()
at Object.interpolateName (E:\reactPlaygroundwebpackmodulesnode_modules\loader-utils\lib\interpolateName.js:66:5)
at getLocalIdent (E:\reactPlaygroundwebpackmodulesnode_modules\css-loader\dist\utils.js:55:37)
at generateScopedName (E:\reactPlaygroundwebpackmodulesnode_modules\css-loader\dist\index.js:90:16)
at exportScopedName (E:\reactPlaygroundwebpackmodulesnode_modules\postcss-modules-scope\src\index.js:64:26)
at localizeNode (E:\reactPlaygroundwebpackmodulesnode_modules\postcss-modules-scope\src\index.js:84:26)
at Array.map ()
at localizeNode (E:\reactPlaygroundwebpackmodulesnode_modules\postcss-modules-scope\src\index.js:80:38)
@ ./scr/components/piza/PizzaImage.css 2:14-157
@ ./scr/components/piza/pizaimage.js
@ ./scr/container/piza.js
@ ./scr/App.js
@ ./scr/index.js
@ multi (webpack)-dev-server/client?http://localhost:8080 ./scr/index.js
please any one can help on this

[jcubic]

I had this error when there were two rules for css that match for the same file:

function useCSS({modules}) {
  return [
    isProduction ? MiniCssExtractPlugin.loader : 'style-loader',
    {
      loader: 'css-loader',
      query: {
        modules: modules,
        sourceMap: !isProduction,
        importLoaders: 1,
        localIdentName: isProduction ? '[hash:base64:5]' : '[local]__[hash:base64:5]'
      }
    },
    {
      loader: 'postcss-loader',
      options: {
        ident: 'postcss',
        plugins: [
          require('postcss-import')({ addDependencyTo: webpack }),
          require('postcss-url')(),
          require('postcss-preset-env')({
            /* use stage 2 features (defaults) */
            stage: 2,
          }),
          require('postcss-reporter')(),
          require('postcss-browser-reporter')({
            disabled: isProduction
          })
        ]
      }
    }
  ];
}


      {
        test: /[^\.]+\.css$/,
        exclude: [
          path.resolve(__dirname, 'node_modules')
        ],
        use: useCSS({modules: false})
      },
      {
        test: /\.m\.css$/,
        exclude: [
          path.resolve(__dirname, 'node_modules')
        ],
        use: useCSS({modules: true})
      },

adding matching for whole file solved the issue:

        test: /^[^\.]+\.css$/,

[phanirithvij]

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'
    ], ....

[HooeyPooey]

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.

Omg! That works, thank you so much!

[switz]

FWIW I also had this error because I didn't realize I was importing .css files in both style-loader and file-loader. For the future intrepid traveler here.

[sarthakagarwal23]

Priority of loaders matters in this case .
In my case i changed the order of loader from use: [ 'css-loader',style-loader', 'sass-loader'] to this use: [ style-loader','css-loader', 'sass-loader']
and it works fines for me .
Thanks

[johnmikel]

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.

The hero we need!

[sayjeyhi]

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;
};

[PFight]

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