how to extract variables from files imported from node_modules?

[briancappello]

Just started playing around with this, seems pretty cool! One problem I ran into however, as the title states:

file: _variables.scss

@import "~some-vendor/scss/_vars.scss";

$foo-bar: 5;

file: styles.js

const variables = require('sass-extract-loader?{"includePaths":["node_modules"]}!./_variables.scss')

This does not work :(

ERROR in ./node_modules/sass-extract-loader?{"includePaths":["node_modules"]}!./frontend/app/styles/_variables.scss
Module build failed: Error: File to import not found or unreadable: ~skeleton-scss/scss/base/_variables.scss.

However, if I remove the tilda from the @import statement it does work (but i believe that breaks the scss, no?)

Am I missing anything, or might this be a bug?

[jgranstrom]

@briancappello thanks for the report. The problem is that node-sass uses a custom loader to let webpack handle all the imports (stuff like ~ and so on), while sass-extract also uses a custom loader to be able to extract variables over imports. This means it won't be able to handle the special webpack imports in the sass files. I will have to do some work to bridge these two mechanisms together so that it wont break node-sass imports. I'm currently working on some fixes in the core library, will have a look at this next.

[adi518]

There's an example in the docs:

import colors from 'sass-extract-loader!@node_modules/my-module/colors.scss'

@node_modules is an alias I added to my Webpack config.

[RyanMulready]

Any progress on this? Ran into this problem today.

[osvaldasvalutis]

Any progress on this? Ran into this problem today.

Same here.

[nickensoul]

Using relative paths for importing 3rd-party sass-variables seems to works fine.

Example:

variables.scss

@import '../../../node_modules/@blueprintjs/core/src/common/variables';
// other imports, local styles etc

app.styles.js

export const theme = require('sass-extract-loader?{"plugins": ["sass-extract-js"]}!../sass/variables.scss');

/* hack-hack */

export const GlobalStyles = createGlobalStyle`
    .app {
      background: ${theme.ptDarkAppBackgroundColor};
    }
`;

I guess, the problem is that when we do imports in scss-files, it's processed by sass-loader.
And as a follows, sass-loader takes care about tilde (~) to resolve it is an node_modules import.
But there is no sass-loader and tilde couldn't be resolved.
Take a look for sass-loader similar issue, I believe it may be fixed by proper Webpack resolving configuration.

[nickensoul]

@adi518, seems like your solution is a bit differ with @briancappello's question.
Yep, we can import variables to provide access to them (or accumulate) in js-modules directly. In particular, if we use them in js-files only.
But in my case I need to re-define default sass variables from 3rd-party components and then export them to the styled-components and there others.

[dietergeerts]

Any progress? It's already more than a year.... The proposed workarounds aren't valid, as npm module resolution needs to do his work, and a node module could be installed higher up....

[deleemillie]

To add to this, webpack aliases are also not supported.