[Webpack 2] Doesn't seem to work with other loaders

[randomdevpete]

I've tried with both css-loader and postcss-loader; my Webpack config is as follows:

module:{ 
   rules: [
            {
                test: /\.(css)$/,
                loaders: ["css-object-loader", "postcss-loader", "css-loader"],
                exclude: /node_modules/,
            }
    ]
}

Error as follows:

ERROR in ./source/styles/menu.css
Module build failed: Syntax Error

(1:1) Unknown word

> 1 | exports = module.exports = require("../../node_modules/css-loader/lib/css-base.js")(undefined);
    | ^
  2 | // imports
  3 |

If I take out postcss-loader so css-loader is piping straight into css-object-loader, I get this:

ERROR in ./source/styles/menu.css
Module build failed: Error: undefined:6:45: property missing ':'
    at error (D:\projects\downright\node_modules\css\lib\parse\index.js:62:15)
    at declaration (D:\projects\downright\node_modules\css\lib\parse\index.js:223:33)
    at declarations (D:\projects\downright\node_modules\css\lib\parse\index.js:252:19)
    at rule (D:\projects\downright\node_modules\css\lib\parse\index.js:560:21)
    at rules (D:\projects\downright\node_modules\css\lib\parse\index.js:117:70)
    at stylesheet (D:\projects\downright\node_modules\css\lib\parse\index.js:81:21)
    at Object.module.exports [as parse] (D:\projects\downright\node_modules\css\lib\parse\index.js:564:20)
    at getParsedStylesheet (D:\projects\downright\node_modules\css-object-loader\src\index.js:22:14)
    at Object.cssObjectLoader (D:\projects\downright\node_modules\css-object-loader\src\index.js:14:26)
 @ ./source/OuterContainer.jsx 7:0-39
 @ ./source/ContextMenuProvider.jsx
 @ ./source/index.js
 @ multi ./source/index.js

I assume this is because of Webpack 2?

[randomdevpete]

Actually it's just css-loader causing a problem - it also is incompatible with postcss-loader right now apparently.

[pl12133]

Since css-loader and css-object-loader do very different things, they are not intended to be used together. css-loader will load CSS into <style> tags, css-object-loader will load CSS into plain old JavaScript objects.

Have you taken a look at the "Usage with other CSS loaders" section of the documentation?

[randomdevpete]

This isn't accurate - css-loader just interprets @import and url() rules within css files, allowing you to link css files together. You are thinking of style-loader that loads CSS into

[randomdevpete]

Actually sorry - I was inaccurate there too. css-loader also (optionally) rewrites class names and exports them. So yeah it possibly isn't so useful with css-object-loader, although maybe handling url() inside css is still a valid case?

[pl12133]

Ahh you're right I was thinking of style-loader instead of css-loader there.

For handling @import and url(...) statements, I think you're referring to supporting file loader like css-loader does right now. In that case that's currently unsupported, but should be addressed by https://github.com/pl12133/css-object-loader/issues/1, which I haven't had the time to hunt down a good solution for yet. I'd be happy to have a PR for supporting loading of @import and url() statements.