Disable import once for specific imports

[jacobgunnarsson]

Is it possible to somehow disable the import once functionality for specific module imports? I can't seem to find the feature in the documentation.

My current use case is this; I have an Angular 2 app with a global app.scss stylesheet and several component-specific stylesheets loaded separately from app.scss. All modules imported into app.scss are considered already imported already when the component-specific SCSS is compiled, this is fine for modules that compile into CSS because the global app.scss will cascade down into the components.

However, component stylesheets also depend on utility modules such as _variables.scss or _mixins.scss. Because these modules are considered to be already imported in the global app.scss, they are not available in the component stylesheet.

I'm using node-sass-magic-importer as a custom importer in the Webpack sass-loader.

[maoberlehner]

I had exactly the same problem in combination with webpack, thats why I implemented a new option disableImportOnce a few days ago. Although this disables it globally and not only for specific modules. But you can use something like css-nano or clean-css to remove duplicated CSS.

I already considered implementing something like LESS import options (http://lesscss.org/features/#import-options) including a once option. But for now your best way achieving almost the same result is to disable import once and add a tool to cleanup duplicated CSS.

I will not close this issue and handle it as a feature request for a feature like LESS import options, but do not expect the feature to be implemented in the near future.

Thanks for using node-sass-magic-importer.

[jacobgunnarsson]

Ok, thanks @maoberlehner! A feature like LESS import once (or reference in this case) sounds ideal. In the meanwhile I've resorted to using disableImportOnce.

[maoberlehner]

Something similar to reference is already implemented – importing only variables and / or mixins is possible with node filtering, you can use the variables or the silent filter.

[jacobgunnarsson]

Ah, yeah, you're right! It'd be nice if imports with explicit filtering for [mixins] or [variables] ignored the global import once functionality.

[maoberlehner]

Since version 4.0.0 this is the case :) If you are using either selector filtering (@import '{ .class } from file.scss') or node filtering (@import '[variables] from file.scss') or a combination of both, once importing is disabled for this file and only a warning is outputted in the console (you can disable warnings with the disableWarnings option)

[jacobgunnarsson]

That would solve my problem, but I can't get it to work. Maybe the Webpack loader module resolution is somehow conflicting with node-sass-magic-importer? I can't force the import with either @import '[variables] from ~s-variables' or @import '[variables] from ../../node_modules/s-variables/src/main.scss'.

Using disableImportOnce: true works as expected though.

[maoberlehner]

You're right, I created a new issue for this problem: https://github.com/maoberlehner/node-sass-magic-importer/issues/87

I will try to solve this in the following days, webpack compatibility is a high priority on my list, but until this is fixed, the only workaround is to disable import once completely.

Thanks for reporting.

[maoberlehner]

Quick update: I'm sorry I couldn't provide a solution for this problem until now – I'm currently working on a solution and I hope I can solve this in the near future.

Until this is fixed the best solution is still to use disableImportOnce: true in combination with http://cssnano.co/ or https://github.com/jakubpawlowicz/clean-css for removing duplicated CSS.

[maoberlehner]

I published a new release (4.1.5) which fixes problems with webpack.

[joachimvdnab]

Hi @maoberlehner, does the webpack version matter to make use of the node filtering? I am trying to load the variables with node filtering, but it won't work for me. I am still using webpack version 1.14.

[maoberlehner]

Hey @joachimvdnab I've not tested node-sass-magic-importer with webpack 1.x so it is possible that it doesn't work. If you could provide me your configuration or a link to the source code of the project, maybe I can help you to make it work.

[joachimvdnab]

I will try to provide a sample project as soon as possible.