sass @import directives is ignored

[gleb-lobastov]

Hi again.

We widely using '@import' directive in our project and it seems to be not supported for now in babel-plugin-react-css-modules. I also dig sources and found nothing in postcss pipeline that could process it.

Would do you like to integrate postcss plugin for @import handling?

A likely candidate is postcss-import plugin. It has one problem: it is asynchronous. So it break your flow, because of lazyResult.root usage. It is only works with syncronous plugins (I also unearth that this is not recommended approach: http://api.postcss.org/LazyResult.html#root).

Sync mode will not be implemented according to postcss/postcss-import#180 and postcss/postcss-import#293 but there is two workarounds:

1. Use postcss-import 7.x.x which is syncronous. I try and it works fine for a quick look.
2. Take a look at https://github.com/css-modules/postcss-icss-import which is reffered in postcss/postcss-import#293. But as author said it is in beta now and not yet working.

What do you think about?

[CoralSilver]

I'm just running into same issue. Getting error message process(css).then(cb) to work with async plugins @gleb-lobastov are you importing sass or css files? I tried postcss-import but I'm getting same error.

[gajus]

We widely using '@import' directive in our project and it seems to be not supported for now in babel-plugin-react-css-modules. I also dig sources and found nothing in postcss pipeline that could process it.

I am using node-sass as pre-processor before postcss for this purpose.

Use postcss-import 7.x.x which is syncronous

Thats an option.

You can also create a wrapper around any async plugin to make it sync, e.g. with https://github.com/abbr/deasync.

[longlho]

seems like postcss-import doesn't wanna suport sync so im just releasing my patch as a separate pkg https://www.npmjs.com/package/postcss-import-sync2

[corydolphin]

@gajus is there any chance you can provide more details about how you have configured things? I'm having the same problem with sass files and imports.

[ganyanchuan1989]

i have the same problem with less file and imports。i try use postcss-import is not work #145

[sztal]

Hi, anybody managed to figure out how to include node-sass in order to have working sass @import directives?

[smably]

@gajus I'd also like to request details about using node-sass as a preprocessor. Is this done via a separate Babel plugin? We're using sass-loader with webpack (which uses node-sass under the hood) and it would be great if we could find a way to keep the output from the babel plugin in sync with what we're getting back from the webpack loader.

[smably]

I've opened a PR to add node-sass as a pre-processor to make this compatible with sass-loader-style imports: #187.

Not sure how active this project is, so in case the PR doesn't get merged, I put my fork up on npm as babel-plugin-react-css-modules-sass for anyone with the same problem.