Plugin imports

[MatteoGabriele]

I currently switched to webpack 2 and I am encountering one big issue so far: the plugin configuration.

I know that postcss now is handling configurations also with this postcss.config.js file, but i really don't/can't use it because of the setup I'm trying to achieve: maintaining all application setup in one place and not spread config files around.

So I would like to use postcss in webpack 2 like it was on webpack 1: via loader.

This is my webpack setup for all css loaded in my application, and apparently is not working and is giving me the error Error: No PostCSS Config found in ...

module.exports = {
  test: /\.css$/,
  exclude: [/node_modules/],
  use: [
    'style-loader',
    {
      loader: 'css-loader',
      options: {
        modules: true,
        importLoaders: 1
      }
    },
    {
      loader: 'postcss-loader',
      options: {
        plugins: function () {
          return [
            require('postcss-advanced-variables')({ variables }),
            require('postcss-cssnext')({
              browsers: ['last 3 versions', 'iOS >= 8']
            })
          ]
        }
      }
    }
  ]
}

What is working though is my vue-loader which is handling also css coming from a .vue file.
Same treatment

module.exports = {
  test: /\.vue$/,
  loader: 'vue-loader',
  options: {
     postcss: [
       require('postcss-advanced-variables')({ variables }),
       require('postcss-cssnext')({
         browsers: ['last 3 versions', 'iOS >= 8']
       })
     ]
   }
}

Can i avoid in some way this postcss new configuration and do the "old fashion" way?

I hope it's kind of clear what i wrote :)

Thanks a lot for you time.

[michael-ciniawsky]

@MatteoGabriele What is your exact version of webpack ? You can of course use PostCSS via configuration in webpack.config.js if you prefer. FWIW vue-loader now supports postcss.config.js aswell :D so with one postcss.config.js you could get rid of the redundant PostCSS Setup 💯 . If your are using webpack < v2.2.1 you need to update to this version, bc there was a bug with 'complex' (functions, require()) options for loaders. webpack 2.2.1 fixes this and your setup should work as expected

[MatteoGabriele]

I was working with webpack 2.2.1 but there is a problem with the js compression plugin and temporarily rolled back to 2.2.0. Apparently a version fix one part of my application and breaks the other :D but whatever. Now I'll go to 2.2.1 again to try what you are saying.

Can i choose where to drop my postcss.config.js file? I'm using a custom CLI so the entire dev server and webpack, with all postcss plugins, are not locally installed and using such a configuration is not really possible or at least not easy/clean for me.

Would be nice if I can just choose where postcss should look up for that file and take that file close where it belongs ( at least for what i need ).

In case i want to go for the most redundant way: how can i just use only webpack to load plugins?

thanks again!

[michael-ciniawsky]

I'm using a custom CLI so the entire dev server and webpack

@MatteoGabriele uhh... all this custom configs all the time :D

1. if you can not update to v2.2.1 now =>

webpack.config.js

{ 
   loader: 'postcss-loader', 
   options: {
        ident: 'postcss', // this one
        ...
   }
}

Complex Options

Can I choose where to drop my postcss.config.js file?

2. Yes everywhere down the file tree, but in the same directory as the file (no './config' subfolder), it's even possible to cascade them and nearest postcss.config.js found relative to dirname(file) applies. 😛 (Recommended is './' (root)).

|– src
|    |– postcss.config.js (.vue && .css)
|    |– components
|    |    | – component.vue
|    |    | – postcss.config.js (.vue only)
|    | – styles 
|    |    | – style.css
|    |    | – postcss.config.js (.css only)
|
|– postcss.config.js (.vue && .css) [recommended]
|– webpack.config.js

The above works out-of-the-box, no setup required

3. For subfolders you need to set the config path explicitly (not recommended) =>

webpack.config.js

 { loader: 'postcss-loader', options: { config: 'path/to/config/folder/with/postcss/config ' } }

|– config
|   | –  postcss.config.js (.vue && .css)
|– src
|   |– components
|   |    | – component.vue
|   | – styles 
|   |    | – style.css
|
|– webpack.config.js

[MatteoGabriele]

@michael-ciniawsky ok I'm going to try one of this setup then! Hope to find my way! :D

My custom config is to avoid other custom configs aahahahha. One package to rule them all!

Thanks a lot for you explanation. Super!