New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Doesn't work with webpack 2 #92

Closed
lavezzi1 opened this Issue Aug 21, 2016 · 67 comments

Comments

Projects
None yet
@lavezzi1

lavezzi1 commented Aug 21, 2016

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

This comment has been minimized.

Show comment
Hide comment
@ai

ai Aug 21, 2016

Member

Do you have any docs of API changes in loaders?

Member

ai commented Aug 21, 2016

Do you have any docs of API changes in loaders?

@lavezzi1

This comment has been minimized.

Show comment
Hide comment
@lavezzi1

lavezzi1 Aug 22, 2016

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

lavezzi1 commented Aug 22, 2016

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

This comment has been minimized.

Show comment
Hide comment
@jantimon

jantimon Aug 24, 2016

Contributor

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

Contributor

jantimon commented Aug 24, 2016

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

@lavezzi1

This comment has been minimized.

Show comment
Hide comment
@lavezzi1

lavezzi1 Aug 24, 2016

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

lavezzi1 commented Aug 24, 2016

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

@agileago

This comment has been minimized.

Show comment
Hide comment
@agileago

agileago Aug 26, 2016

same with me .

agileago commented Aug 26, 2016

same with me .

@soyuka

This comment has been minimized.

Show comment
Hide comment
@soyuka

soyuka Sep 7, 2016

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

soyuka commented Sep 7, 2016

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

This comment has been minimized.

Show comment
Hide comment
@eugene1g

eugene1g Sep 8, 2016

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.

eugene1g commented Sep 8, 2016

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

This comment has been minimized.

Show comment
Hide comment
@soyuka

soyuka Sep 8, 2016

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
.

soyuka commented Sep 8, 2016

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

This comment has been minimized.

Show comment
Hide comment
@eugene1g

eugene1g Sep 8, 2016

Yep, and the config structure is the same:

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

eugene1g commented Sep 8, 2016

Yep, and the config structure is the same:

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

This comment has been minimized.

Show comment
Hide comment
@eugene1g

eugene1g Sep 8, 2016

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?

eugene1g commented Sep 8, 2016

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

This comment has been minimized.

Show comment
Hide comment
@soyuka

soyuka Sep 8, 2016

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

soyuka commented Sep 8, 2016

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

@akrawchyk

This comment has been minimized.

Show comment
Hide comment
@akrawchyk

akrawchyk Sep 26, 2016

@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

akrawchyk commented Sep 26, 2016

@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

This comment has been minimized.

Show comment
Hide comment
@panjiesw

panjiesw Oct 4, 2016

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.

panjiesw commented Oct 4, 2016

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.

@rozzzly

This comment has been minimized.

Show comment
Hide comment
@rozzzly

rozzzly Oct 4, 2016

@panjiesw You've pretty much got it. Here's an excerpt from my webpack.config.js. Hopefully anyone else looking for how to get webpack@2 to play nice with postcss-loader will see this because I had to spend several hours crawling github seeing as webpack@2 is in beta there's no documentation. I have tested this, and at of the time I'm posting this, using the latest releases, it works, but may require some tweaking to fit into your setup.

const filePath = require('./paths');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    devtool: 'source-map',
    resolve: {
        modules: [ 'node_modules', filePaths.SRC ],
        extensions: [ '.css', '.ts', '.tsx', '.js', '.jsx' ]
    },
    output: {
        path: filePaths.DIST,
        publicPath: '/',
        filename: '[name].js'
    },
    module: {
        loaders: [
            // .... other loaders
            {
                test: /\.css$/,
                include: [ filePaths.src ],
                loader: ExtractTextPlugin.extract({
                    fallbackLoader: 'style-loader',
                    loader: [
                        { loader: 'css-loader', query: { modules: true, sourceMaps: true } },
                        'postcss-loader'
                    ]
                })
            }
        ]
    },
    plugins: [ // https://github.com/webpack/webpack/issues/3018#issuecomment-248633498
        new webpack.LoaderOptionsPlugin({
            options: {
                context: filePaths.root,
                postcss: [ // <---- postcss configs go here under LoadOptionsPlugin({ options: { ??? } })
                    require('postcss-cssnext'),
                    require('lost')(),
                    require('postcss-reporter')()
                ]
                // ...other configs that used to directly on `modules.exports`
            }
        }),
        new ExtractTextPlugin({ filename: 'css/[name].css', disable: false, allChunks: true })
    ]
};

rozzzly commented Oct 4, 2016

@panjiesw You've pretty much got it. Here's an excerpt from my webpack.config.js. Hopefully anyone else looking for how to get webpack@2 to play nice with postcss-loader will see this because I had to spend several hours crawling github seeing as webpack@2 is in beta there's no documentation. I have tested this, and at of the time I'm posting this, using the latest releases, it works, but may require some tweaking to fit into your setup.

const filePath = require('./paths');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    devtool: 'source-map',
    resolve: {
        modules: [ 'node_modules', filePaths.SRC ],
        extensions: [ '.css', '.ts', '.tsx', '.js', '.jsx' ]
    },
    output: {
        path: filePaths.DIST,
        publicPath: '/',
        filename: '[name].js'
    },
    module: {
        loaders: [
            // .... other loaders
            {
                test: /\.css$/,
                include: [ filePaths.src ],
                loader: ExtractTextPlugin.extract({
                    fallbackLoader: 'style-loader',
                    loader: [
                        { loader: 'css-loader', query: { modules: true, sourceMaps: true } },
                        'postcss-loader'
                    ]
                })
            }
        ]
    },
    plugins: [ // https://github.com/webpack/webpack/issues/3018#issuecomment-248633498
        new webpack.LoaderOptionsPlugin({
            options: {
                context: filePaths.root,
                postcss: [ // <---- postcss configs go here under LoadOptionsPlugin({ options: { ??? } })
                    require('postcss-cssnext'),
                    require('lost')(),
                    require('postcss-reporter')()
                ]
                // ...other configs that used to directly on `modules.exports`
            }
        }),
        new ExtractTextPlugin({ filename: 'css/[name].css', disable: false, allChunks: true })
    ]
};
@ai

This comment has been minimized.

Show comment
Hide comment
@ai

ai Oct 7, 2016

Member

Fixed in #104

Member

ai commented Oct 7, 2016

Fixed in #104

@StevenIseki

This comment has been minimized.

Show comment
Hide comment
@StevenIseki

StevenIseki Dec 13, 2016

I am using the following setup for postcss-loader with webpack 2 🔽
The important part is new webpack.LoaderOptionsPlugin({ options: { postcss: [ autoprefixer ] } }) in plugins and !postcss-loader in css-loader.

const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin');
const autoprefixer = require('autoprefixer')

module.exports = {
  entry: './index.js',
  devtool: 'inline-source-map',
  output: {
    filename: 'bundle.js',
    publicPath: ''
  },
  module: {
    loaders: [
      { 
        test: /\.css$/, 
        loader: 'style-loader!css-loader?modules&importLoaders=1!postcss-loader' 
      },
      { 
        test: /\.js$/, exclude: /node_modules/, 
        loader: 'babel-loader?presets[]=es2015&presets[]=react&presets[]=stage-2' 
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({ title: 'Example', template: './index.html' }),
    new webpack.LoaderOptionsPlugin({ options: { postcss: [ autoprefixer ] } })
  ],
}

StevenIseki commented Dec 13, 2016

I am using the following setup for postcss-loader with webpack 2 🔽
The important part is new webpack.LoaderOptionsPlugin({ options: { postcss: [ autoprefixer ] } }) in plugins and !postcss-loader in css-loader.

const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin');
const autoprefixer = require('autoprefixer')

module.exports = {
  entry: './index.js',
  devtool: 'inline-source-map',
  output: {
    filename: 'bundle.js',
    publicPath: ''
  },
  module: {
    loaders: [
      { 
        test: /\.css$/, 
        loader: 'style-loader!css-loader?modules&importLoaders=1!postcss-loader' 
      },
      { 
        test: /\.js$/, exclude: /node_modules/, 
        loader: 'babel-loader?presets[]=es2015&presets[]=react&presets[]=stage-2' 
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({ title: 'Example', template: './index.html' }),
    new webpack.LoaderOptionsPlugin({ options: { postcss: [ autoprefixer ] } })
  ],
}
@michael-ciniawsky

This comment has been minimized.

Show comment
Hide comment
@michael-ciniawsky

michael-ciniawsky Dec 14, 2016

Collaborator

@StevenIseki

...
module: {
    rules: [
      { 
        test: /\.css$/, 
        use: [
          'style-loader',
          { loader: 'css-loader', options: { modules: true, importLoaders: 1 } },
          { loader: 'postcss-loader', options: { plugins: () => [...plugins] } },
        ]
      },
      { 
        test: /\.js$/,
        use:  [
           { loader: 'babel-loader', options: { presets: ['es2015', 'react', 'stage-2'] } }
        ],
        exclude: /node_modules/, 
      }
    ]
  }
...

loaders -> rules, loader -> use, LoaderOptionsPlugin was a 'polyfill' required in webpack =< 2.1.0-beta.24and is unnessecary beginning from 2.1.0-beta.25. This is the final syntax for webpack@2

Collaborator

michael-ciniawsky commented Dec 14, 2016

@StevenIseki

...
module: {
    rules: [
      { 
        test: /\.css$/, 
        use: [
          'style-loader',
          { loader: 'css-loader', options: { modules: true, importLoaders: 1 } },
          { loader: 'postcss-loader', options: { plugins: () => [...plugins] } },
        ]
      },
      { 
        test: /\.js$/,
        use:  [
           { loader: 'babel-loader', options: { presets: ['es2015', 'react', 'stage-2'] } }
        ],
        exclude: /node_modules/, 
      }
    ]
  }
...

loaders -> rules, loader -> use, LoaderOptionsPlugin was a 'polyfill' required in webpack =< 2.1.0-beta.24and is unnessecary beginning from 2.1.0-beta.25. This is the final syntax for webpack@2

@StevenIseki

This comment has been minimized.

Show comment
Hide comment
@StevenIseki

StevenIseki Dec 14, 2016

@michael-ciniawsky What is [...plugins] ?
I get the error PostCSS Config could not be loaded. Please check your PostCSS Config

Here is my config...

const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin');
const autoprefixer = require('autoprefixer')

module.exports = {
  entry: './index.js',
  devtool: 'inline-source-map',
  output: { filename: 'bundle.js', publicPath: '' },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          { loader: 'css-loader', options: { modules: true, importLoaders: 1 } },
          { loader: 'postcss-loader', options: { plugins: () => [...plugins] } },
        ]
      },
      {
        test: /\.js$/,
        use: [ { loader: 'babel-loader', options: { presets: ['es2015', 'react', 'stage-2'] } } ],
        exclude: /node_modules/,
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({ title: 'Example', template: './index.html' })
  ],
}

StevenIseki commented Dec 14, 2016

@michael-ciniawsky What is [...plugins] ?
I get the error PostCSS Config could not be loaded. Please check your PostCSS Config

Here is my config...

const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin');
const autoprefixer = require('autoprefixer')

module.exports = {
  entry: './index.js',
  devtool: 'inline-source-map',
  output: { filename: 'bundle.js', publicPath: '' },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          { loader: 'css-loader', options: { modules: true, importLoaders: 1 } },
          { loader: 'postcss-loader', options: { plugins: () => [...plugins] } },
        ]
      },
      {
        test: /\.js$/,
        use: [ { loader: 'babel-loader', options: { presets: ['es2015', 'react', 'stage-2'] } } ],
        exclude: /node_modules/,
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({ title: 'Example', template: './index.html' })
  ],
}
@yhaiovyi

This comment has been minimized.

Show comment
Hide comment
@yhaiovyi

yhaiovyi Dec 14, 2016

Absolutely the same here

yhaiovyi commented Dec 14, 2016

Absolutely the same here

@andykenward

This comment has been minimized.

Show comment
Hide comment
@andykenward

andykenward Dec 14, 2016

@StevenIseki if you aren't using any postcss plugins then just remove it to get it to work.

use: [
          'style-loader',
          { loader: 'css-loader', options: { modules: true, importLoaders: 1 } },
          'postcss-loader'
        ]

FYI
For some reason I have to use query instead of options for a production build for me. using "webpack": "2.1.0-beta.25",

andykenward commented Dec 14, 2016

@StevenIseki if you aren't using any postcss plugins then just remove it to get it to work.

use: [
          'style-loader',
          { loader: 'css-loader', options: { modules: true, importLoaders: 1 } },
          'postcss-loader'
        ]

FYI
For some reason I have to use query instead of options for a production build for me. using "webpack": "2.1.0-beta.25",

@andykenward

This comment has been minimized.

Show comment
Hide comment
@andykenward

andykenward Dec 14, 2016

Just spent some time fixing this issue in my react boilerplate.

Check this commit

I had to move my postcss plugins to a postcss.config.js. Also had to return an object in that file to get postcss-cssnext to work with browser settings.

Then had a weird issue with a production build if I use options instead of query for my .css files.

  "engines": {
    "node": "6.9.1",
    "npm": "3.10.8"
  },
"webpack": "2.1.0-beta.25",
"css-loader": "0.26.1",
"postcss": "5.2.6",
"postcss-browser-reporter": "0.5.0",
"postcss-cssnext": "2.9.0",
"postcss-focus": "1.0.0",
"postcss-load-config": "1.0.0",
"postcss-loader": "1.2.1",
"postcss-reporter": "3.0.0",
"postcss-simple-vars": "3.0.0",
"postcss-smart-import": "0.6.3",

andykenward commented Dec 14, 2016

Just spent some time fixing this issue in my react boilerplate.

Check this commit

I had to move my postcss plugins to a postcss.config.js. Also had to return an object in that file to get postcss-cssnext to work with browser settings.

Then had a weird issue with a production build if I use options instead of query for my .css files.

  "engines": {
    "node": "6.9.1",
    "npm": "3.10.8"
  },
"webpack": "2.1.0-beta.25",
"css-loader": "0.26.1",
"postcss": "5.2.6",
"postcss-browser-reporter": "0.5.0",
"postcss-cssnext": "2.9.0",
"postcss-focus": "1.0.0",
"postcss-load-config": "1.0.0",
"postcss-loader": "1.2.1",
"postcss-reporter": "3.0.0",
"postcss-simple-vars": "3.0.0",
"postcss-smart-import": "0.6.3",
@StevenIseki

This comment has been minimized.

Show comment
Hide comment
@StevenIseki

StevenIseki Dec 14, 2016

@andykenward I am using just the 1 plugin autoprefixer
If I change it to { loader: 'postcss-loader', options: { plugins: () => [autoprefixer] } }, it still doesn't work.

StevenIseki commented Dec 14, 2016

@andykenward I am using just the 1 plugin autoprefixer
If I change it to { loader: 'postcss-loader', options: { plugins: () => [autoprefixer] } }, it still doesn't work.

@andykenward

This comment has been minimized.

Show comment
Hide comment
@andykenward

andykenward Dec 14, 2016

@StevenIseki do you have a repo i can look at?

andykenward commented Dec 14, 2016

@StevenIseki do you have a repo i can look at?

@StevenIseki

This comment has been minimized.

Show comment
Hide comment
@StevenIseki

StevenIseki Dec 15, 2016

The repo I am testing this on is https://github.com/vacenz/last-draft
Here is the webpack.config

Once I get the setup working I will port it over to my boilerplate projects as well
e.g. react-webpack-example and react-router-redux-example, react-webpack-static-site-example

StevenIseki commented Dec 15, 2016

The repo I am testing this on is https://github.com/vacenz/last-draft
Here is the webpack.config

Once I get the setup working I will port it over to my boilerplate projects as well
e.g. react-webpack-example and react-router-redux-example, react-webpack-static-site-example

@andykenward

This comment has been minimized.

Show comment
Hide comment
@andykenward

andykenward Dec 15, 2016

@StevenIseki the latest commit ld-x/last-draft@a0f1bb2 worked for me.

Saw it autoprefixing this css when i changed it to display: flex

I suggest you add localIdentName: '[name]__[local]__[hash:base64:5] to the css-loader to make it easier to read the classnames while in development mode

'style-loader',
{ loader: 'css-loader', options: { modules: true,localIdentName: '[name]__[local]__[hash:base64:5]', importLoaders: 1 } },
'postcss-loader',

andykenward commented Dec 15, 2016

@StevenIseki the latest commit ld-x/last-draft@a0f1bb2 worked for me.

Saw it autoprefixing this css when i changed it to display: flex

I suggest you add localIdentName: '[name]__[local]__[hash:base64:5] to the css-loader to make it easier to read the classnames while in development mode

'style-loader',
{ loader: 'css-loader', options: { modules: true,localIdentName: '[name]__[local]__[hash:base64:5]', importLoaders: 1 } },
'postcss-loader',
@francoisromain

This comment has been minimized.

Show comment
Hide comment
@francoisromain

francoisromain Feb 2, 2017

Finally I had something working (with webpack 2.2.1. and extract text plugin @2.0.0-beta). I'll put it here:

    test: /\.css$/,
      use: ExtractTextPlugin.extract({
        fallbackLoader: 'style-loader',
        loader: [{
          loader: 'css-loader?sourceMap',
        }, {
          loader: 'postcss-loader?sourceMap',
          options: {
            plugins: () => [
              postcssImport({ addDependencyTo: webpack }),
              postcssCssnext({
                browsers: ['last 2 versions', 'ie >= 9'],
                compress: true,
              }),
              postcssInlineSvg,
            ],
          },
        }],
      })

francoisromain commented Feb 2, 2017

Finally I had something working (with webpack 2.2.1. and extract text plugin @2.0.0-beta). I'll put it here:

    test: /\.css$/,
      use: ExtractTextPlugin.extract({
        fallbackLoader: 'style-loader',
        loader: [{
          loader: 'css-loader?sourceMap',
        }, {
          loader: 'postcss-loader?sourceMap',
          options: {
            plugins: () => [
              postcssImport({ addDependencyTo: webpack }),
              postcssCssnext({
                browsers: ['last 2 versions', 'ie >= 9'],
                compress: true,
              }),
              postcssInlineSvg,
            ],
          },
        }],
      })
@michael-ciniawsky

This comment has been minimized.

Show comment
Hide comment
@michael-ciniawsky

michael-ciniawsky Feb 2, 2017

Collaborator

@francoisromain Yep webpack 2.2.1 ships with ident removed so loader.options finally work correctly now and extract-text-webpack-plugin v2 is also nearly finished. Be aware that extract-text-plugin v2 final will have an API change fallbackLoader => fallback && loader => use

Collaborator

michael-ciniawsky commented Feb 2, 2017

@francoisromain Yep webpack 2.2.1 ships with ident removed so loader.options finally work correctly now and extract-text-webpack-plugin v2 is also nearly finished. Be aware that extract-text-plugin v2 final will have an API change fallbackLoader => fallback && loader => use

@francoisromain

This comment has been minimized.

Show comment
Hide comment
@francoisromain

francoisromain Feb 2, 2017

@michael-ciniawsky thanks for the info. Could you please show what will be the equivalent of the code above with webpack 2 and extract-text-webpack-plugin 2?

francoisromain commented Feb 2, 2017

@michael-ciniawsky thanks for the info. Could you please show what will be the equivalent of the code above with webpack 2 and extract-text-webpack-plugin 2?

@edmundo096

This comment has been minimized.

Show comment
Hide comment
@edmundo096

edmundo096 Feb 2, 2017

@michael-ciniawsky Nice! I didn't saw your reply when I posted my reply to ai.
When I first replied about the use of ident I had just installed Webpack 2.2.0 (seems that it 2.2.1 was published just after I updated my Webpack install & config from 1.x to 2.2.0, lucky me...).

So it's more of waiting for it to be fixed by Webpack 2.3 (although seems that on 2.2.1 it's already fixed/removed, but haven't tested it yet).
Thanks for clarifying it out!

(I will edit my first reply after testing it out on 2.2.1)

edmundo096 commented Feb 2, 2017

@michael-ciniawsky Nice! I didn't saw your reply when I posted my reply to ai.
When I first replied about the use of ident I had just installed Webpack 2.2.0 (seems that it 2.2.1 was published just after I updated my Webpack install & config from 1.x to 2.2.0, lucky me...).

So it's more of waiting for it to be fixed by Webpack 2.3 (although seems that on 2.2.1 it's already fixed/removed, but haven't tested it yet).
Thanks for clarifying it out!

(I will edit my first reply after testing it out on 2.2.1)

@michael-ciniawsky

This comment has been minimized.

Show comment
Hide comment
@michael-ciniawsky

michael-ciniawsky Feb 2, 2017

Collaborator

@francoisromain

    test: /\.css$/,
      use: ExtractTextPlugin.extract({
-       fallbackLoader: 'style-loader',
+       fallback: 'style-loader',
-        loader: [{
+        use: [{
-         loader: 'css-loader?sourceMap',
+         loader: 'css-loader',
+         options: { sourceMap: true, importLoaders: 1 }
        }, {
-        loader: 'postcss-loader?sourceMap',
+        loader: 'postcss-loader',
          options: {
+          sourceMap: true
            plugins: () => [
              postcssImport({ addDependencyTo: webpack }),
              postcssCssnext({
                browsers: ['last 2 versions', 'ie >= 9'],
                compress: true,
              }),
              postcssInlineSvg,
            ],
          },
        }],
      })

but not atm 😛 (v2-rc*), wait until v2@latest is out

@edmundo096 webpack v2.2.1 ships the ident fix, it's finally working now

Collaborator

michael-ciniawsky commented Feb 2, 2017

@francoisromain

    test: /\.css$/,
      use: ExtractTextPlugin.extract({
-       fallbackLoader: 'style-loader',
+       fallback: 'style-loader',
-        loader: [{
+        use: [{
-         loader: 'css-loader?sourceMap',
+         loader: 'css-loader',
+         options: { sourceMap: true, importLoaders: 1 }
        }, {
-        loader: 'postcss-loader?sourceMap',
+        loader: 'postcss-loader',
          options: {
+          sourceMap: true
            plugins: () => [
              postcssImport({ addDependencyTo: webpack }),
              postcssCssnext({
                browsers: ['last 2 versions', 'ie >= 9'],
                compress: true,
              }),
              postcssInlineSvg,
            ],
          },
        }],
      })

but not atm 😛 (v2-rc*), wait until v2@latest is out

@edmundo096 webpack v2.2.1 ships the ident fix, it's finally working now

@francoisromain

This comment has been minimized.

Show comment
Hide comment
@francoisromain

francoisromain commented Feb 2, 2017

@michael-ciniawsky cool, thank you!

@koutsenko

This comment has been minimized.

Show comment
Hide comment
@koutsenko

koutsenko Feb 18, 2017

I don't understand a simple thing.
My webpack 2.2.1 rule:

 { 
        test: /\.less$/, 
        use: [
          "style-loader",
          "css-loader",
          {
            loader: 'postcss-loader',
            options: {
              plugins: function () {
                return [
                  require('autoprefixer')
                ];
              }
            }
          },
          "less-loader"
        ]
      },

It works, but where must I add an option to support only 2 latest browser versions?
In Webpack 1 things was simple:

      { test: /\.less$/, loader: 'style!css!autoprefixer?browsers=last 2 version!less' },

Please dont suggest LoaderOptionsPlugin, or postcss.config.js, or another bloatware.
Thanks.

koutsenko commented Feb 18, 2017

I don't understand a simple thing.
My webpack 2.2.1 rule:

 { 
        test: /\.less$/, 
        use: [
          "style-loader",
          "css-loader",
          {
            loader: 'postcss-loader',
            options: {
              plugins: function () {
                return [
                  require('autoprefixer')
                ];
              }
            }
          },
          "less-loader"
        ]
      },

It works, but where must I add an option to support only 2 latest browser versions?
In Webpack 1 things was simple:

      { test: /\.less$/, loader: 'style!css!autoprefixer?browsers=last 2 version!less' },

Please dont suggest LoaderOptionsPlugin, or postcss.config.js, or another bloatware.
Thanks.

@michael-ciniawsky

This comment has been minimized.

Show comment
Hide comment
@michael-ciniawsky

michael-ciniawsky Feb 18, 2017

Collaborator

@koutsenko

- require('autoprefixer')
+ require('autoprefixer')({ browsers: 'last 2 versions' })
Collaborator

michael-ciniawsky commented Feb 18, 2017

@koutsenko

- require('autoprefixer')
+ require('autoprefixer')({ browsers: 'last 2 versions' })
@gazpachu

This comment has been minimized.

Show comment
Hide comment
@gazpachu

gazpachu Mar 7, 2017

What am I doing wrong? I don't get any build errors but I don't see the CSS rules prefixed. The autoprefixer was working fine when I was using webpack 1.

const ExtractSASS = new ExtractTextPlugin(`/commit/styles/${options.cssFileName}`);
...
inside isProduction condition:

webpackConfig.plugins.push(
  ExtractSASS
);

webpackConfig.module.rules.push({
      test: /\.scss$/,
      use: ExtractSASS.extract([
        'css-loader',
        {
          loader: 'postcss-loader',
          options: {
            plugins: () => [
              Autoprefixer({ browsers: 'last 2 versions' })
            ]
          }
        },
        'sass-loader'
      ])
    });

If I use the propossed configuration in the readme:

webpackConfig.module.rules.push({
      test: /\.scss$/,
      use: ExtractSASS.extract([
        'css-loader?importLoaders=1',
        'postcss-loader',
        'sass-loader'
      ])
    });

I get this error:

ERROR in ./src/app/components/bundle.scss
Module build failed: Error: No PostCSS Config found in: /Users/martosj/Dev/Webs/commit-frontend/src/app/components
    at /Users/martosj/Dev/Webs/commit-frontend/node_modules/postcss-load-config/index.js:51:26
 @ ./src/app/index.jsx 51:0-35

ERROR in ./src/app/components/bundle.scss
Module build failed: Error
    at /Users/martosj/Dev/Webs/commit-frontend/node_modules/webpack/lib/NormalModule.js:141:35
    at /Users/martosj/Dev/Webs/commit-frontend/node_modules/loader-runner/lib/LoaderRunner.js:364:11
    at /Users/martosj/Dev/Webs/commit-frontend/node_modules/loader-runner/lib/LoaderRunner.js:230:18
    at context.callback (/Users/martosj/Dev/Webs/commit-frontend/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at /Users/martosj/Dev/Webs/commit-frontend/node_modules/postcss-loader/index.js:148:13

ERROR in /Users/martosj/Dev/Webs/commit-frontend/node_modules/extract-text-webpack-plugin/loader.js??ref--4-0!/Users/martosj/Dev/Webs/commit-frontend/node_modules/css-loader/index.js?importLoaders=1!/Users/martosj/Dev/Webs/commit-frontend/node_modules/postcss-loader/index.js!/Users/martosj/Dev/Webs/commit-frontend/node_modules/sass-loader/lib/loader.js!/Users/martosj/Dev/Webs/commit-frontend/src/app/components/bundle.scss doesn't export content

I'm using this postcss.config.js:

const AutoPrefixer = require('autoprefixer');

module.exports = {
  plugins: [
    AutoPrefixer({ browsers: ['last 2 versions'] })
  ]
};

gazpachu commented Mar 7, 2017

What am I doing wrong? I don't get any build errors but I don't see the CSS rules prefixed. The autoprefixer was working fine when I was using webpack 1.

const ExtractSASS = new ExtractTextPlugin(`/commit/styles/${options.cssFileName}`);
...
inside isProduction condition:

webpackConfig.plugins.push(
  ExtractSASS
);

webpackConfig.module.rules.push({
      test: /\.scss$/,
      use: ExtractSASS.extract([
        'css-loader',
        {
          loader: 'postcss-loader',
          options: {
            plugins: () => [
              Autoprefixer({ browsers: 'last 2 versions' })
            ]
          }
        },
        'sass-loader'
      ])
    });

If I use the propossed configuration in the readme:

webpackConfig.module.rules.push({
      test: /\.scss$/,
      use: ExtractSASS.extract([
        'css-loader?importLoaders=1',
        'postcss-loader',
        'sass-loader'
      ])
    });

I get this error:

ERROR in ./src/app/components/bundle.scss
Module build failed: Error: No PostCSS Config found in: /Users/martosj/Dev/Webs/commit-frontend/src/app/components
    at /Users/martosj/Dev/Webs/commit-frontend/node_modules/postcss-load-config/index.js:51:26
 @ ./src/app/index.jsx 51:0-35

ERROR in ./src/app/components/bundle.scss
Module build failed: Error
    at /Users/martosj/Dev/Webs/commit-frontend/node_modules/webpack/lib/NormalModule.js:141:35
    at /Users/martosj/Dev/Webs/commit-frontend/node_modules/loader-runner/lib/LoaderRunner.js:364:11
    at /Users/martosj/Dev/Webs/commit-frontend/node_modules/loader-runner/lib/LoaderRunner.js:230:18
    at context.callback (/Users/martosj/Dev/Webs/commit-frontend/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at /Users/martosj/Dev/Webs/commit-frontend/node_modules/postcss-loader/index.js:148:13

ERROR in /Users/martosj/Dev/Webs/commit-frontend/node_modules/extract-text-webpack-plugin/loader.js??ref--4-0!/Users/martosj/Dev/Webs/commit-frontend/node_modules/css-loader/index.js?importLoaders=1!/Users/martosj/Dev/Webs/commit-frontend/node_modules/postcss-loader/index.js!/Users/martosj/Dev/Webs/commit-frontend/node_modules/sass-loader/lib/loader.js!/Users/martosj/Dev/Webs/commit-frontend/src/app/components/bundle.scss doesn't export content

I'm using this postcss.config.js:

const AutoPrefixer = require('autoprefixer');

module.exports = {
  plugins: [
    AutoPrefixer({ browsers: ['last 2 versions'] })
  ]
};
@michael-ciniawsky

This comment has been minimized.

Show comment
Hide comment
@michael-ciniawsky

michael-ciniawsky Mar 7, 2017

Collaborator

@gazpachu Webpack Version >= v2.2.1? Are you trying to set PostCSS options in both webpack.config.js and postcss.config.js? Where in you directory structure is postcss.config.js located?

Collaborator

michael-ciniawsky commented Mar 7, 2017

@gazpachu Webpack Version >= v2.2.1? Are you trying to set PostCSS options in both webpack.config.js and postcss.config.js? Where in you directory structure is postcss.config.js located?

@gazpachu

This comment has been minimized.

Show comment
Hide comment
@gazpachu

gazpachu Mar 8, 2017

@michael-ciniawsky it turned out to be that I had to specify the location of the config file. I thought it would automatically read the same folder level where the webpack.config.js file is located but that was not the case.

'postcss-loader?config=webpack/postcss.config.js'

On the other hand, I've noticed that the autoprefixer is not adding -moz nor -ms nor -o prefixes. Aren't they required anymore?

gazpachu commented Mar 8, 2017

@michael-ciniawsky it turned out to be that I had to specify the location of the config file. I thought it would automatically read the same folder level where the webpack.config.js file is located but that was not the case.

'postcss-loader?config=webpack/postcss.config.js'

On the other hand, I've noticed that the autoprefixer is not adding -moz nor -ms nor -o prefixes. Aren't they required anymore?

@andykenward

This comment has been minimized.

Show comment
Hide comment
@andykenward

andykenward Mar 8, 2017

@gazpachu dependant on what browsers you have defined. Add some older browsers and it should prefix as required

andykenward commented Mar 8, 2017

@gazpachu dependant on what browsers you have defined. Add some older browsers and it should prefix as required

@edmundo096

This comment has been minimized.

Show comment
Hide comment
@edmundo096

edmundo096 Mar 8, 2017

@gazpachu I got the same issue. After some research, I concluded how the loading of postcss.config.js worked.

I recommend you read my suggestions in the comment above #92 (comment). Summed up, if you use postcss.config.js, it must be "anywhere down the file tree" where Webpack matches a file (in your case, of /src/app/components/bundle.scss file, postcss.config.js must be anywhere inside that path; using the same folder level where the webpack.config.js file is located, as you said, wouldn't work).

Otherwise, you should pass the options by any of other ways used by cosmiconfig, or indicate its location by the query params ?config as you have used, which I believe is processed at https://github.com/postcss/postcss-loader/blob/master/index.js#L54

For the prefixes, Autoprefixer applies it depending the current browser use. See the README first lines of https://github.com/postcss/autoprefixer.

edmundo096 commented Mar 8, 2017

@gazpachu I got the same issue. After some research, I concluded how the loading of postcss.config.js worked.

I recommend you read my suggestions in the comment above #92 (comment). Summed up, if you use postcss.config.js, it must be "anywhere down the file tree" where Webpack matches a file (in your case, of /src/app/components/bundle.scss file, postcss.config.js must be anywhere inside that path; using the same folder level where the webpack.config.js file is located, as you said, wouldn't work).

Otherwise, you should pass the options by any of other ways used by cosmiconfig, or indicate its location by the query params ?config as you have used, which I believe is processed at https://github.com/postcss/postcss-loader/blob/master/index.js#L54

For the prefixes, Autoprefixer applies it depending the current browser use. See the README first lines of https://github.com/postcss/autoprefixer.

@milewski

This comment has been minimized.

Show comment
Hide comment
@milewski

milewski Apr 23, 2017

as webpack 2.4.1 i could only get it working using the ident: 'postcss' as mentioned here #92 (comment)

milewski commented Apr 23, 2017

as webpack 2.4.1 i could only get it working using the ident: 'postcss' as mentioned here #92 (comment)

@michael-ciniawsky

This comment has been minimized.

Show comment
Hide comment
@michael-ciniawsky

michael-ciniawsky Apr 23, 2017

Collaborator

@milewski Hmm that's weird I need to check that, got a similiar issue @extract-text-webpack-plugin maybe it's a bug :/ introduced recently again, please post your webpack.config.js here 😛

Collaborator

michael-ciniawsky commented Apr 23, 2017

@milewski Hmm that's weird I need to check that, got a similiar issue @extract-text-webpack-plugin maybe it's a bug :/ introduced recently again, please post your webpack.config.js here 😛

@milewski

This comment has been minimized.

Show comment
Hide comment
@milewski

milewski Apr 23, 2017

const options = {
    sourceMap: true,
    ident: 'postcss', //<-- without this doesnt work.. says postcss couldnt be found in the dir.......
    plugins: () => {
        return [
            require('autoprefixer')({
                browsers: [
                    "> 5%",
                    "last 2 versions"
                ]
            })
        ]
    }
}
...
{
    test: /\.s?css$/,
    use: ExtractTextPlugin.extract({
        fallback: 'style-loader',
        use: [
            { loader: 'css-loader', options: { minimize: true, importLoaders: 1 } },
            { loader: 'postcss-loader', options: options },
            { loader: 'resolve-url-loader' },
            { loader: 'sass-loader', query: { sourceMap: true } }
        ]
    })
},

milewski commented Apr 23, 2017

const options = {
    sourceMap: true,
    ident: 'postcss', //<-- without this doesnt work.. says postcss couldnt be found in the dir.......
    plugins: () => {
        return [
            require('autoprefixer')({
                browsers: [
                    "> 5%",
                    "last 2 versions"
                ]
            })
        ]
    }
}
...
{
    test: /\.s?css$/,
    use: ExtractTextPlugin.extract({
        fallback: 'style-loader',
        use: [
            { loader: 'css-loader', options: { minimize: true, importLoaders: 1 } },
            { loader: 'postcss-loader', options: options },
            { loader: 'resolve-url-loader' },
            { loader: 'sass-loader', query: { sourceMap: true } }
        ]
    })
},
@michael-ciniawsky

This comment has been minimized.

Show comment
Hide comment
@michael-ciniawsky

michael-ciniawsky Apr 23, 2017

Collaborator

According to Tobias (sokra) there weren't any changes in webpack, could you please try

  1. PostCSS Options inside the rule
  2. With and without ETWP
  3. With and without resolve-url-loader
  4. Without { sourceMap: true }in postcss-loader

The Error sounds unrelated to what was bug before, when the ident is missing ({Function}/ require() not stringified correctly => plugins: {})

Collaborator

michael-ciniawsky commented Apr 23, 2017

According to Tobias (sokra) there weren't any changes in webpack, could you please try

  1. PostCSS Options inside the rule
  2. With and without ETWP
  3. With and without resolve-url-loader
  4. Without { sourceMap: true }in postcss-loader

The Error sounds unrelated to what was bug before, when the ident is missing ({Function}/ require() not stringified correctly => plugins: {})

@michael-ciniawsky

This comment has been minimized.

Show comment
Hide comment
@michael-ciniawsky

michael-ciniawsky Apr 23, 2017

Collaborator
- { loader: 'sass-loader', query: { sourceMap: true } }
+ { loader: 'sass-loader', options: { sourceMap: true } }
Collaborator

michael-ciniawsky commented Apr 23, 2017

- { loader: 'sass-loader', query: { sourceMap: true } }
+ { loader: 'sass-loader', options: { sourceMap: true } }
@milewski

This comment has been minimized.

Show comment
Hide comment
@milewski

milewski Apr 23, 2017

Okay here we go

Changing query to options fails

{ loader: 'sass-loader', options: { sourceMap: true } }

removing resolve-url-loader fails

// { loader: 'resolve-url-loader' },

PostCSS options inside. also fails

{
    loader: 'postcss-loader',
    options: {
        plugins: () => {
            return [
                require('autoprefixer')({
                    browsers: [
                        "> 5%",
                        "last 2 versions"
                    ]
                })
            ]
        }
    }
},

without ETWP also fails

{
    test: /\.s?css$/,
    use: [
        { loader: 'style-loader' },
        { loader: 'css-loader', options: { minimize: true, importLoaders: 1 } },
        {
            loader: 'postcss-loader',
            options: {
                plugins: () => {
                    return [
                        require('autoprefixer')({
                            browsers: [
                                "> 5%",
                                "last 2 versions"
                            ]
                        })
                    ]
                }
            }
        },
        // { loader: 'resolve-url-loader' },
        { loader: 'sass-loader', options: { sourceMap: true } }
    ]
},

without ETWP + ident = Works

{
    test: /\.s?css$/,
    use: [
        { loader: 'style-loader' },
        { loader: 'css-loader', options: { minimize: true, importLoaders: 1 } },
        {
            loader: 'postcss-loader',
            options: {
                ident: 'postcss',
                plugins: () => {
                    return [
                        require('autoprefixer')({
                            browsers: [
                                "> 5%",
                                "last 2 versions"
                            ]
                        })
                    ]
                }
            }
        },
        // { loader: 'resolve-url-loader' },
        { loader: 'sass-loader', options: { sourceMap: true } }
    ]
},

You can have a look at this with the real files i am using here: https://github.com/milewski/portfolio

milewski commented Apr 23, 2017

Okay here we go

Changing query to options fails

{ loader: 'sass-loader', options: { sourceMap: true } }

removing resolve-url-loader fails

// { loader: 'resolve-url-loader' },

PostCSS options inside. also fails

{
    loader: 'postcss-loader',
    options: {
        plugins: () => {
            return [
                require('autoprefixer')({
                    browsers: [
                        "> 5%",
                        "last 2 versions"
                    ]
                })
            ]
        }
    }
},

without ETWP also fails

{
    test: /\.s?css$/,
    use: [
        { loader: 'style-loader' },
        { loader: 'css-loader', options: { minimize: true, importLoaders: 1 } },
        {
            loader: 'postcss-loader',
            options: {
                plugins: () => {
                    return [
                        require('autoprefixer')({
                            browsers: [
                                "> 5%",
                                "last 2 versions"
                            ]
                        })
                    ]
                }
            }
        },
        // { loader: 'resolve-url-loader' },
        { loader: 'sass-loader', options: { sourceMap: true } }
    ]
},

without ETWP + ident = Works

{
    test: /\.s?css$/,
    use: [
        { loader: 'style-loader' },
        { loader: 'css-loader', options: { minimize: true, importLoaders: 1 } },
        {
            loader: 'postcss-loader',
            options: {
                ident: 'postcss',
                plugins: () => {
                    return [
                        require('autoprefixer')({
                            browsers: [
                                "> 5%",
                                "last 2 versions"
                            ]
                        })
                    ]
                }
            }
        },
        // { loader: 'resolve-url-loader' },
        { loader: 'sass-loader', options: { sourceMap: true } }
    ]
},

You can have a look at this with the real files i am using here: https://github.com/milewski/portfolio

@milewski

This comment has been minimized.

Show comment
Hide comment
@milewski

milewski Apr 23, 2017

oh..

this works

// { loader: 'style-loader' },
   { loader: 'css-loader', options: { minimize: true, importLoaders: 1 } },

and this also works

   { loader: 'style-loader' },
   { loader: 'css-loader', options: { minimize: true } },

but together both fail (unless ident is set)

so the problem might be in style-loader and css-loader->importLoaders

milewski commented Apr 23, 2017

oh..

this works

// { loader: 'style-loader' },
   { loader: 'css-loader', options: { minimize: true, importLoaders: 1 } },

and this also works

   { loader: 'style-loader' },
   { loader: 'css-loader', options: { minimize: true } },

but together both fail (unless ident is set)

so the problem might be in style-loader and css-loader->importLoaders

@AndreKR

This comment has been minimized.

Show comment
Hide comment
@AndreKR

AndreKR May 10, 2017

I also find that I have to give ident: 'something' to make @import work:

{
  entry: './src/css/test.css',
  output: {
    path: __dirname,
    filename: 'assets/dummy.css'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          use: [
            { loader: 'css-loader', options: { importLoaders: 1 } },
            {
              loader: 'postcss-loader',
              options: {
//                    ident: 'remove-this-and-it-fails',
                plugins: [ require('postcss-cssnext')() ]
              }
            }
          ]
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin("assets/bundle.css")
  ]
}

with test.css:

@import url('inner.css');

body {
  & div {
    color: red;
  }
}

leads to:

Module build failed: ModuleBuildError: Module build failed: TypeError: plugin is not a function

With ident: 'remove-this-and-it-fails' uncommented it works.

Here's a complete example:
https://github.com/AndreKR/issue-webpack-postcss-ident

AndreKR commented May 10, 2017

I also find that I have to give ident: 'something' to make @import work:

{
  entry: './src/css/test.css',
  output: {
    path: __dirname,
    filename: 'assets/dummy.css'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          use: [
            { loader: 'css-loader', options: { importLoaders: 1 } },
            {
              loader: 'postcss-loader',
              options: {
//                    ident: 'remove-this-and-it-fails',
                plugins: [ require('postcss-cssnext')() ]
              }
            }
          ]
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin("assets/bundle.css")
  ]
}

with test.css:

@import url('inner.css');

body {
  & div {
    color: red;
  }
}

leads to:

Module build failed: ModuleBuildError: Module build failed: TypeError: plugin is not a function

With ident: 'remove-this-and-it-fails' uncommented it works.

Here's a complete example:
https://github.com/AndreKR/issue-webpack-postcss-ident

@kroko

This comment has been minimized.

Show comment
Hide comment
@kroko

kroko Jun 6, 2017

I can confirm behaviour.

There is site.global.scss (imported as entry point intro entry javascript file)
And site.global.scss has @import "site.legacy.css"; in it. Note the vanilla CSS.
And PostCSS plugins are defined within webpack config, say

webpack.config.js

// ...

// ----------------
// PostCSS plugins

const postCssPlugins = function () {
  let postPluginConf = [];
  postPluginConf.push(
    require('autoprefixer')({
      browsers: ['> 0.0001%'],
      cascade: true,
      remove: true
    })
  );
  postPluginConf.push(
    require('css-mqpacker')()
  );
  postPluginConf.push(
    require('cssnano')({
      discardComments: {
        removeAll: true
      },
      autoprefixer: false,
      zindex: false,
      normalizeUrl: false
    })
  );
  return postPluginConf;
};

// ...


// ----------------
// MODULE RULES

config.module = {
  rules: [
    {
      test: /\.(css)$/,
      use: ExtractTextPlugin.extract({
        fallback: 'style-loader',
        use: [
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
              sourceMap: true
            }
          },
          {
            loader: 'postcss-loader',
            options: {
              plugins: postCssPlugins,
              sourceMap: true
            }
          }
        ]
      })
    },
    {
      test: /\.(scss)$/,
      use: ExtractTextPlugin.extract({
        fallback: 'style-loader',
        use: [
          {
            loader: 'css-loader',
            options: {
              importLoaders: 2,
              sourceMap: true
            }
          },
          {
            loader: 'postcss-loader',
            options: {
              // ident: 'remove-this-and-it-fails',
              plugins: postCssPlugins,
              sourceMap: true
            }
          },
          {
            loader: 'sass-loader',
            options: {
              sourceMap: true
            }
          }
        ]
      })
    }
  ]
};

// ...

The build will fail.

It can be resolved either by adding indent key, or moving PostCSS plugins in plugin conf file (as it actually should be done).

postcss.config.js

module.exports = {
  plugins: [
    require('autoprefixer')({
      cascade: true,
      remove: true
    }),
    require('css-mqpacker')(),
    require('cssnano')({
      discardComments: {
        removeAll: true
      },
      autoprefixer: false,
      zindex: false,
      normalizeUrl: false
    })
  ]
};

webpack.config.js

// ----------------
// MODULE RULES

config.module = {
  rules: [
    {
      test: /\.(css)$/,
      use: ExtractTextPlugin.extract({
        fallback: 'style-loader',
        use: [
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
              sourceMap: true
            }
          },
          {
            loader: 'postcss-loader',
            options: {
              sourceMap: true
            }
          }
        ]
      })
    },
    {
      test: /\.(scss)$/,
      use: ExtractTextPlugin.extract({
        fallback: 'style-loader',
        use: [
          {
            loader: 'css-loader',
            options: {
              importLoaders: 2,
              sourceMap: true
            }
          },
          {
            loader: 'postcss-loader',
            options: {
              sourceMap: true
            }
          },
          {
            loader: 'sass-loader',
            options: {
              sourceMap: true
            }
          }
        ]
      })
    }
  ]
};

// ...

kroko commented Jun 6, 2017

I can confirm behaviour.

There is site.global.scss (imported as entry point intro entry javascript file)
And site.global.scss has @import "site.legacy.css"; in it. Note the vanilla CSS.
And PostCSS plugins are defined within webpack config, say

webpack.config.js

// ...

// ----------------
// PostCSS plugins

const postCssPlugins = function () {
  let postPluginConf = [];
  postPluginConf.push(
    require('autoprefixer')({
      browsers: ['> 0.0001%'],
      cascade: true,
      remove: true
    })
  );
  postPluginConf.push(
    require('css-mqpacker')()
  );
  postPluginConf.push(
    require('cssnano')({
      discardComments: {
        removeAll: true
      },
      autoprefixer: false,
      zindex: false,
      normalizeUrl: false
    })
  );
  return postPluginConf;
};

// ...


// ----------------
// MODULE RULES

config.module = {
  rules: [
    {
      test: /\.(css)$/,
      use: ExtractTextPlugin.extract({
        fallback: 'style-loader',
        use: [
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
              sourceMap: true
            }
          },
          {
            loader: 'postcss-loader',
            options: {
              plugins: postCssPlugins,
              sourceMap: true
            }
          }
        ]
      })
    },
    {
      test: /\.(scss)$/,
      use: ExtractTextPlugin.extract({
        fallback: 'style-loader',
        use: [
          {
            loader: 'css-loader',
            options: {
              importLoaders: 2,
              sourceMap: true
            }
          },
          {
            loader: 'postcss-loader',
            options: {
              // ident: 'remove-this-and-it-fails',
              plugins: postCssPlugins,
              sourceMap: true
            }
          },
          {
            loader: 'sass-loader',
            options: {
              sourceMap: true
            }
          }
        ]
      })
    }
  ]
};

// ...

The build will fail.

It can be resolved either by adding indent key, or moving PostCSS plugins in plugin conf file (as it actually should be done).

postcss.config.js

module.exports = {
  plugins: [
    require('autoprefixer')({
      cascade: true,
      remove: true
    }),
    require('css-mqpacker')(),
    require('cssnano')({
      discardComments: {
        removeAll: true
      },
      autoprefixer: false,
      zindex: false,
      normalizeUrl: false
    })
  ]
};

webpack.config.js

// ----------------
// MODULE RULES

config.module = {
  rules: [
    {
      test: /\.(css)$/,
      use: ExtractTextPlugin.extract({
        fallback: 'style-loader',
        use: [
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
              sourceMap: true
            }
          },
          {
            loader: 'postcss-loader',
            options: {
              sourceMap: true
            }
          }
        ]
      })
    },
    {
      test: /\.(scss)$/,
      use: ExtractTextPlugin.extract({
        fallback: 'style-loader',
        use: [
          {
            loader: 'css-loader',
            options: {
              importLoaders: 2,
              sourceMap: true
            }
          },
          {
            loader: 'postcss-loader',
            options: {
              sourceMap: true
            }
          },
          {
            loader: 'sass-loader',
            options: {
              sourceMap: true
            }
          }
        ]
      })
    }
  ]
};

// ...
@inthegarage

This comment has been minimized.

Show comment
Hide comment
@inthegarage

inthegarage Jun 7, 2017

Sadly none of these suggestions worked for me, still getting postcss error. Oh well, reverting to angular-cli for the moment.

inthegarage commented Jun 7, 2017

Sadly none of these suggestions worked for me, still getting postcss error. Oh well, reverting to angular-cli for the moment.

@DanDvoracek

This comment has been minimized.

Show comment
Hide comment
@DanDvoracek

DanDvoracek Jun 13, 2017

Same here... Nothing worked in my case. However I have a slightly different setup regarding css as I use sass:

{ // for css stuff...
        test: /\.sass$/,
        use: extractSass.extract({
          fallback: "style-loader",
          use: [
            { loader: "css-loader" },
            { loader: "sass-loader" }
          ]
        })
      }

I have tried all the things I have been reading about. The only thing that changes for me is that I use sass where most of the people use pure css (in the examples I see).. I wonder if I have any issue because of this as none of the solution provided here is working for me. Any hint?

I'm basically slowly giving up on the autoprefixer thing... It becomes very annoying. No doc matches, it's unclear whether the plugins are for webpack 1 or 2.. I start to get lost. Any ideas, suggestions would be very welcome. Thanks for reading!

DanDvoracek commented Jun 13, 2017

Same here... Nothing worked in my case. However I have a slightly different setup regarding css as I use sass:

{ // for css stuff...
        test: /\.sass$/,
        use: extractSass.extract({
          fallback: "style-loader",
          use: [
            { loader: "css-loader" },
            { loader: "sass-loader" }
          ]
        })
      }

I have tried all the things I have been reading about. The only thing that changes for me is that I use sass where most of the people use pure css (in the examples I see).. I wonder if I have any issue because of this as none of the solution provided here is working for me. Any hint?

I'm basically slowly giving up on the autoprefixer thing... It becomes very annoying. No doc matches, it's unclear whether the plugins are for webpack 1 or 2.. I start to get lost. Any ideas, suggestions would be very welcome. Thanks for reading!

@kroko

This comment has been minimized.

Show comment
Hide comment
@kroko

kroko Jun 13, 2017

@DanDvoracek try this

webpack config
.postcssrc.js

build without any scripts definition in package.json

rm -rf public/assets/** && NODE_ENV=development ./node_modules/webpack/bin/webpack.js --config=$(pwd)/webpack.front.config.js --progress

kroko commented Jun 13, 2017

@DanDvoracek try this

webpack config
.postcssrc.js

build without any scripts definition in package.json

rm -rf public/assets/** && NODE_ENV=development ./node_modules/webpack/bin/webpack.js --config=$(pwd)/webpack.front.config.js --progress
@michael-ciniawsky

This comment has been minimized.

Show comment
Hide comment
@michael-ciniawsky

michael-ciniawsky Jun 13, 2017

Collaborator

@kroko https://github.com/WARP-LAB/WARP-GUIDES-WEBPACK-2/blob/master/01-webpack-guide-basic/webpacktest-basic/.postcssrc.js#L20

- .filter((e) => e !== null)

null => false && postcss-load-config filters {Boolean} by default 😉

@DanDvoracek Yes this config and don't forget to actually add postcss-loader

{ // for css stuff...
        test: /\.sass$/,
        use: extractSass.extract({
          fallback: "style-loader",
          use: [
            { loader: "css-loader" },
+           'postcss-loader',
            { loader: "sass-loader" }
          ]
        })
      }
Collaborator

michael-ciniawsky commented Jun 13, 2017

@kroko https://github.com/WARP-LAB/WARP-GUIDES-WEBPACK-2/blob/master/01-webpack-guide-basic/webpacktest-basic/.postcssrc.js#L20

- .filter((e) => e !== null)

null => false && postcss-load-config filters {Boolean} by default 😉

@DanDvoracek Yes this config and don't forget to actually add postcss-loader

{ // for css stuff...
        test: /\.sass$/,
        use: extractSass.extract({
          fallback: "style-loader",
          use: [
            { loader: "css-loader" },
+           'postcss-loader',
            { loader: "sass-loader" }
          ]
        })
      }
@kroko

This comment has been minimized.

Show comment
Hide comment
@kroko

kroko Jun 13, 2017

@michael-ciniawsky i haven't checked it. i remember that some time ago that was not the case (see my ticket), so it has stuck as a habit to clear out nulls from plugins, rules and entries arrays. actually, for all arrays :)

kroko commented Jun 13, 2017

@michael-ciniawsky i haven't checked it. i remember that some time ago that was not the case (see my ticket), so it has stuck as a habit to clear out nulls from plugins, rules and entries arrays. actually, for all arrays :)

@michael-ciniawsky

This comment has been minimized.

Show comment
Hide comment
@michael-ciniawsky

michael-ciniawsky Jun 13, 2017

Collaborator

I don't know for webpack.config.js, but for postcss.config.js I'm nearly 💯 certain 😛 It's just cosmetics anyways, all good :D

Collaborator

michael-ciniawsky commented Jun 13, 2017

I don't know for webpack.config.js, but for postcss.config.js I'm nearly 💯 certain 😛 It's just cosmetics anyways, all good :D

@DanDvoracek

This comment has been minimized.

Show comment
Hide comment
@DanDvoracek

DanDvoracek Jun 14, 2017

Thanks a lot @kroko and @michael-ciniawsky 👍 I will give it a try and let you know :D

EDIT: tested.Thanks @kroko , your file put me on the track for what I was doing wrong. All good now!

DanDvoracek commented Jun 14, 2017

Thanks a lot @kroko and @michael-ciniawsky 👍 I will give it a try and let you know :D

EDIT: tested.Thanks @kroko , your file put me on the track for what I was doing wrong. All good now!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment