Doesn't work with webpack 2

[lavezzi1]

Hello guys. Looks like it doesn't works with the latest webpack 2 beta.

        loaders: [
            {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract({ fallbackLoader: 'style-loader', loader: 'css-loader!postcss-loader' })
            },

Then I ran webpack-dev-server and it doesn't finish.

Some guys have trouble too here webpack/webpack#2812

[ai]

Do you have any docs of API changes in loaders?

[lavezzi1]

No docs, it's webpack you know. Anyway I found this, take a look please at loaders section https://gist.github.com/sokra/27b24881210b56bbaff7

[jantimon]

ExtractTextPlugin 1 doesn't work with Webpack 2 - maybe that's the issue not the postcss-loader

[lavezzi1]

@jantimon I use extract-text-webpack-plugin@^2.0.0-beta

[agileago]

same with me .

[soyuka]

Maybe this stack can help:

ERROR in ./~/postcss-loader!./~/css-loader!./~/sass-loader?{"includePaths":["/home/abluchet/angular2-electron/~/foundation-sites/scss"]}!./scss/app.scss
Module build failed: Unknown word (1:1)

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

 @ ./scss/app.scss 4:14-249
 @ ./src/app.js

ERROR in ./scss/app.scss
Module build failed: ModuleBuildError: Module build failed: Unknown word (1:1)

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

    at /home/abluchet/angular2-electron/node_modules/webpack/lib/NormalModule.js:137:35
    at /home/abluchet/angular2-electron/node_modules/loader-runner/lib/LoaderRunner.js:328:11
    at /home/abluchet/angular2-electron/node_modules/loader-runner/lib/LoaderRunner.js:201:18
    at context.callback (/home/abluchet/angular2-electron/node_modules/loader-runner/lib/LoaderRunner.js:87:13)
    at /home/abluchet/angular2-electron/node_modules/postcss-loader/index.js:105:17

ERROR in /home/abluchet/angular2-electron/node_modules/extract-text-webpack-plugin/loader.js?{"omit":1,"remove":true}!/home/abluchet/angular2-electron/node_modules/style-loader/index.js!/home/abluchet/angular2-electron/node_modules/postcss-loader/index.js!/home/abluchet/angular2-electron/node_modules/css-loader/index.js!/home/abluchet/angular2-electron/node_modules/sass-loader/index.js?{"includePaths":["/home/abluchet/angular2-electron/node_modules/foundation-sites/scss"]}!/home/abluchet/angular2-electron/scss/app.scss doesn't export content
Child extract-text-webpack-plugin:
        + 1 hidden modules

    ERROR in ./~/postcss-loader!./~/css-loader!./~/sass-loader?{"includePaths":["/home/abluchet/angular2-electron/~/foundation-sites/scss"]}!./scss/app.scss
    Module build failed: Unknown word (1:1)

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

Looks like the css loader exports javascript.

Logging console.log(plugins, source) in this plugin shows:

(master ✗)❯ ./node_modules/.bin/webpack
[ { [Function]
    options: { browsers: [Object] },
    info: [Function],
    postcssPlugin: 'autoprefixer',
    postcssVersion: '5.2.0' } ] 
'exports = module.exports = require("./../node_modules/css-loader/lib/css-base.js")();\n// imports\n\n\n// module\nexports.push([module.id, "/**\\n * Foundation for Sites by ZURB\\n * Version 6.2.3\\n * foundation.zurb.com\\n * Licensed under MIT Open Source\\n */\\n/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */\\n/**\\

I tried postcss-js but had font import path issue Module build failed: Error: Cannot find module '../font/xxx.eot?85062211'.

[eugene1g]

FWIW, I'm using postcss-loader and webpack2 with no issues, but I don't have sass-loader in the stack. I've had issues with combining the setup with other magic loader, like postcss-import etc.

[soyuka]

Are you using css loader?
On Thu, 8 Sep 2016 at 06:09, Eugene notifications@github.com wrote:

FWIW, I'm using postcss-loader and webpack2 with no issues, but I don't
have sass-loader in the stack

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
#92 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABQr80V0QhGtZHBtrN2ZK3HMAY1b_rr9ks5qn4qBgaJpZM4JpN_3
.

[eugene1g]

Yep, and the config structure is the same:

ExtractTextPlugin.extract({ fallbackLoader: 'style-loader', loader: 'css-loader?sourceMap!postcss-loader'})

[eugene1g]

Ah I see the execution order is different - for me postcss runs first, css-loader second. Maybe that's causing an issue on your end if css-loader is producing JS, and later post-css loader is expecting css input?

[soyuka]

Indeed, I'm trying this later and'll let you know thx!

[akrawchyk]

@eugene1g I'm having issues using webpack2 with postcss-import as well. My use case is with SUITCSS preprocessor, here's the stack trace:

ERROR in ./client/client.css
Module build failed: TypeError: Path must be a string. Received { raws: { semicolon: true, after: '\n' },
  type: 'root',
  nodes:
   [ AtRule {
       raws: [Object],
       type: 'atrule',
       name: 'import',
       parent: [Object],
       source: [Object],
       params: '\'suitcss\'' } ],
  source:
   { input:
      { css: '@import \'suitcss\';\n',
        file: '/Users/andrew/Developer/sc-comms/client/client.css' },
     start: { line: 1, column: 1 } } }
    at assertPath (path.js:7:11)
    at Object.resolve (path.js:1148:7)
    at AtImport (/Users/andrew/Developer/sc-comms/node_modules/postcss-import/index.js:19:23)
    at creator (/Users/andrew/Developer/sc-comms/node_modules/postcss/lib/postcss.js:150:35)
    at /Users/andrew/Developer/sc-comms/node_modules/postcss-easy-import/index.js:41:21
    at creator (/Users/andrew/Developer/sc-comms/node_modules/postcss/lib/postcss.js:150:35)
    at /Users/andrew/Developer/sc-comms/node_modules/suitcss-preprocessor/lib/index.js:69:23
    at Array.map (native)
    at preprocessor (/Users/andrew/Developer/sc-comms/node_modules/suitcss-preprocessor/lib/index.js:65:29)
    at LazyResult.run (/Users/andrew/Developer/sc-comms/node_modules/postcss/lib/lazy-result.js:286:20)
    at /Users/andrew/Developer/sc-comms/node_modules/postcss/lib/lazy-result.js:200:37
    at LazyResult.asyncTick (/Users/andrew/Developer/sc-comms/node_modules/postcss/lib/lazy-result.js:214:15)
    at processing.Promise.then._this2.processed (/Users/andrew/Developer/sc-comms/node_modules/postcss/lib/lazy-result.js:240:20)
    at LazyResult.async (/Users/andrew/Developer/sc-comms/node_modules/postcss/lib/lazy-result.js:237:27)
    at LazyResult.then (/Users/andrew/Developer/sc-comms/node_modules/postcss/lib/lazy-result.js:141:21)
    at Object.module.exports (/Users/andrew/Developer/sc-comms/node_modules/postcss-loader/index.js:93:10)
 @ ./client/client.js 9:0-23

[panjiesw]

The loader configuration in webpack 2 itself has changed, which, i think, requires you to set the loader name without the query string.

So maybe you should change the config to this (untested):

ExtractTextPlugin.extract({
  fallbackLoader: "style-loader",
  loader: [
    { loader: 'css-loader', query: {sourceMap: true} },
    { loader: 'postcss-loader' }
  ]
})

I'm not so sure about the order, but you get the idea.