Css-loader: Unknown word error

[BHouwens]

I'm trying webpack out on a build that I've been working with for a while, but trying to bundle my Sass files results in the following as an example:

    ERROR in /Users/byronhouwens/ksys334/~/css-loader!./styles/layout/_buttons.scss
Module build failed: CssSyntaxError: /Users/byronhouwens/ksys334/app/assets/styles/layout/_buttons.scss:16:2: Unknown word
    at Input.error (/Users/byronhouwens/ksys334/node_modules/css-loader/node_modules/postcss/lib/input.js:61:21)
    at Parser.unknownDecl (/Users/byronhouwens/ksys334/node_modules/css-loader/node_modules/postcss/lib/parser.js:470:26)
    at Parser.decl (/Users/byronhouwens/ksys334/node_modules/css-loader/node_modules/postcss/lib/parser.js:227:22)
    at Parser.word (/Users/byronhouwens/ksys334/node_modules/css-loader/node_modules/postcss/lib/parser.js:135:30)
    at Parser.loop (/Users/byronhouwens/ksys334/node_modules/css-loader/node_modules/postcss/lib/parser.js:60:26)
    at parse (/Users/byronhouwens/ksys334/node_modules/css-loader/node_modules/postcss/lib/parse.js:25:12)
    at new LazyResult (/Users/byronhouwens/ksys334/node_modules/css-loader/node_modules/postcss/lib/lazy-result.js:57:24)
    at Processor.process (/Users/byronhouwens/ksys334/node_modules/css-loader/node_modules/postcss/lib/processor.js:36:16)
    at processCss (/Users/byronhouwens/ksys334/node_modules/css-loader/lib/processCss.js:165:11)
    at Object.module.exports (/Users/byronhouwens/ksys334/node_modules/css-loader/lib/loader.js:22:2)
 @ /Users/byronhouwens/ksys334/~/css-loader!./styles/main.scss 10:10-89

It fails on some (but not all) Sass partials that are imported using normal CSS into a main Sass file, which is itself then required by the entry point JavaScript file. It looks to me like css-loader problem, but I'm not really sure. Is it possible that some declarations in CSS simply aren't parseable by the loader?

[ben-eb]

You need to compile your Sass files to CSS first, as what is Sass syntax is not CSS syntax (though the inverse _is_ true).

[BHouwens]

I thought this was the intention of the sass-loader? Otherwise do I need to run a separate compile task just to get it into a format that webpack is happy with?

[ben-eb]

I'm not familiar with webpack's internals but, based on your error, it looks like it is not being converted before it reaches css-loader.

[BHouwens]

I suspect this is the case as well. Thanks!

[willin]

@bebraw @Splaktar

ERROR in ./~/.npminstall/css-loader/0.23.1/css-loader!./src/app/modules/style.css
Module build failed: CssSyntaxError: /css-loader!/Users/willin/Documents/wulian/v3/bash/node_modules/.npminstall/style-loader/0.13.1/style-l
oader/index.js!/Users/willin/Documents/wulian/v3/bash/node_modules/.npminstall/css-loader/0.23.1/css-loader/index.js!/Users/willin/Documents
/wulian/v3/bash/src/app/modules/style.css:5:1: Unknown word

style.css:

.active{color: green;}

[terrywh]

@willin did you solved your problem? i encountered the same error.

[willin]

@terrywh no, i changed it into less.

[mbme]

@terrywh I was hitting that error while there were 2 different loader configurations for css in my config: 'style!css' and 'raw'

[decoder318]

Plain old css (not sass and not less) could not be loaded.

ERROR in ./~/css-loader!./~/style-loader!./~/css-loader!./src/styles/site.css
Module build failed: CssSyntaxError: C:\css-loader!C:\Users\Foo\Desktop\try-webpack\node_modules\style-loader\index.js!C:\Users\Foo\Desktop\try-webpack\node_modules\css-loader\index.js!C:\Users\Foo\Desktop\try-webpack\src\styles\site.css:5:1: Unknown word
    at Input.error (C:\Users\Foo\Desktop\try-webpack\node_modules\postcss\lib\input.js:61:22)
    at Parser.unknownWord (C:\Users\Foo\Desktop\try-webpack\node_modules\postcss\lib\parser.js:457:26)
    at Parser.word (C:\Users\Foo\Desktop\try-webpack\node_modules\postcss\lib\parser.js:174:14)
    at Parser.loop (C:\Users\Foo\Desktop\try-webpack\node_modules\postcss\lib\parser.js:60:26)
    at parse (C:\Users\Foo\Desktop\try-webpack\node_modules\postcss\lib\parse.js:26:12)
    at new LazyResult (C:\Users\Foo\Desktop\try-webpack\node_modules\postcss\lib\lazy-result.js:61:24)
    at Processor.process (C:\Users\Foo\Desktop\try-webpack\node_modules\postcss\lib\processor.js:34:16)
    at processCss (C:\Users\Foo\Desktop\try-webpack\node_modules\css-loader\lib\processCss.js:188:11)
    at Object.module.exports (C:\Users\Foo\Desktop\try-webpack\node_modules\css-loader\lib\loader.js:24:2)
 @ ./~/style-loader!./~/css-loader!./src/styles/site.css 4:14-162

My webpack.config.js file is just this:

var path = require('path');

module.exports = {

    entry: "./src/scripts/index.js",
    output: {        
        path: path.join(__dirname, "public", "build"),
        filename: "app.js"
    },
    module: {
        loaders: [
            { test: /\.css$/, loader: "style-loader!css-loader" }
        ]
    }
};

If I remove the module part in the above thing, the error is gone.

I also tried { test: /\.css$/, loader: "style!css" } and
{test: /\.css/, loader: "style!css" }and various possible permutations with removing characters. There are no comments in the css file or the webpack.config.js file.

Specifying the loaders sequence in the import statement works (shown below):

var css = require("style!css!../styles/site.css");

Has this issue been solved yet?

Regards

[ForeSummer]

@decoder318
I have solved this problem by following https://github.com/gowravshekar/bootstrap-webpack
Hope this page can help you!

[aeolusheath]

@ForeSummer hey buddy. how to solve the problem ? more detail?

ERROR in ./~/css-loader?sourceMap!./~/.npminstall/vue-style-loader/1.0.0/vue-style-loader!./~/css-loader!./~/.npminstall/nprogress/0.2.0/nprogress/nprogress.css
Module build failed: CssSyntaxError: /css-loader!/Users/kevinkang/Code/wisebuild-frontend/node_modules/.npminstall/vue-style-loader/1.0.0/vue-style-loader/index.js!/Users/kevinkang/Code/wisebuild-frontend/node_modules/css-loader/index.js!/Users/kevinkang/Code/wisebuild-frontend/node_modules/.npminstall/nprogress/0.2.0/nprogress/nprogress.css:5:1: Unknown word
    at Input.error (/Users/kevinkang/Code/wisebuild-frontend/node_modules/css-loader/node_modules/postcss/lib/input.js:113:22)
    at Parser.unknownWord (/Users/kevinkang/Code/wisebuild-frontend/node_modules/css-loader/node_modules/postcss/lib/parser.js:457:26)
    at Parser.other (/Users/kevinkang/Code/wisebuild-frontend/node_modules/css-loader/node_modules/postcss/lib/parser.js:174:14)
    at Parser.loop (/Users/kevinkang/Code/wisebuild-frontend/node_modules/css-loader/node_modules/postcss/lib/parser.js:81:26)
    at parse (/Users/kevinkang/Code/wisebuild-frontend/node_modules/css-loader/node_modules/postcss/lib/parse.js:26:16)
    at new LazyResult (/Users/kevinkang/Code/wisebuild-frontend/node_modules/css-loader/node_modules/postcss/lib/lazy-result.js:70:24)
    at Processor.process (/Users/kevinkang/Code/wisebuild-frontend/node_modules/css-loader/node_modules/postcss/lib/processor.js:117:12)
    at processCss (/Users/kevinkang/Code/wisebuild-frontend/node_modules/css-loader/lib/processCss.js:188:11)
    at Object.module.exports (/Users/kevinkang/Code/wisebuild-frontend/node_modules/css-loader/lib/loader.js:24:2)
 @ ./~/.npminstall/nprogress/0.2.0/nprogress/nprogress.css 4:14-180

[fashen007]

loaders: [
   { test: /\.css$/, 
     include:  [ /src/,
      //  .... other path u need 
     ],
    loader: "style-loader!css-loader" 
    }
 ]