PostCSS not applied to css modules that compose other css files

[justinhelmer]

This doesn't work (postcss not applied):

.title {
    composes: xx-large from './css/typography.css';
}

This does:

.title {
    composes: xx-large from 'postcss-loader!./css/typography.css';
}

Also import will apply loaders, i.e.:

// App.vue
import typography from './css/typography.css'

/* App.vue */
.title {
    composes: xx-large from './css/typography.css';
}

But it should be baked in.

webpack-contrib/postcss-loader#40
webpack-contrib/css-loader#137
https://forum.vuejs.org/t/css-modules-composes-and-vue-loader/6941/3
https://github.com/css-modules/postcss-modules

[eseQ]

postcss-loader! - that does`t correct way.
For webpack v2:

{
  loader: 'css-loader',
  options: {
    importLoaders: 1 // 0 => no loaders (default); 1 => postcss-loader; 2 => postcss-loader, sass-loader
  }
}

[justinhelmer]

There's no good way to use composes unless you apply all of your loaders inline. It's recommended that you use @value and @mixin instead. See comments in Item.vue

[justinhelmer]

Closing; just dont use composes. it simply won't work without inlining the loaders to the filepath.