Using PostCSS and composing a class from a different file

[Eric Matthys]

I am using PostCSS with the simple vars plugin, as an example. I have the loaders set up like:

loader: 'style!css?modules!postcss'

.link1 {
  composes: link2 from './Link2.css';
  color: $firstLinkColor;
}

.link2 {
  color: $secondLinkColor;
}

In that example, link2 won't be run through PostCSS so the variable won't be replaced, but the variable in link1 will be replaced. If I remove the composes, both link1 and link2 are run through PostCSS and both variables are correctly replaced.

[Eric Matthys]

I found #131

composes: link2 from 'postcss!./Link2.css'; fixes the issue.

[Tobias Koppers]

That's not the correct way.

See https://github.com/webpack/css-loader#importing-and-chained-loaders

You need to use style-loader!css-loader?importLoaders=1&modules!postcss.

[Eric Matthys]

Thanks for the tip. I missed that in the docs.

[Joseph Finlayson]

@ericmatthys close the issue

[Nikolay Dombrovskiy]

For webpack v2:

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

[Matteo Gabriele]

this is actually not working for me. Only works passing composes: foo from '~postcss!filename' but I don't want to write that every time and also I read that is not the correct way.

my webpack configuration has a importsLoaders with 1 (which is postcss-loader right after css-loader) but still doesn't work: every file requested from within css-modules composes method are not passing via the postcss-loader.

working with Vuejs with the following setup:

• webpack 4.29.5
• css-loader 2.1.0
• postcss-loader 3.0.0

thanks anyone for help

cheers

[Hiroki Osame]

This thread is outdated, but for anyone still searching...

Setting importsLoaders: 2 despite only postcss-loader following worked for me. Probably because the vue-loader plugin interferes with the loader configuration.