Importing SASS from another npm package

Question

I would like to get little guidance through my next actions. In our company, we are starting to work on a new admin panel. I came with an idea to modularize it to little, more manageable pieces with npm.

First and the most important module, we are working on is Media Browser. It's written in React and Sass. It is dependent on another module for now called framework, which is kind of foundation for our administration panel. It is also based on Sass and contains all important mixins and variables.

Now, to the question: How can I import mixins and variables to Media Browser package? Relative paths differ. Example:

Directory structure when developing Media Browser:

node_modules
    framework
        vars.scss
styles.scss
package.json

Directory structure when using Media Browser in admin panel:

node_modules
    framework
        vars.scss
    media-browser
        styles.scss
package.json

Relative paths to vars.scss are different.

I am new to npm, so my approach may not be right. I have tried bower too, but I think that with npm@3's flat dependancy tree it is the same.

I have found similar question here: Importing Sass through npm, but I would rather avoid some workarounds. IMHO, this should be doable in more elegant way now in npm@3.

Thank you

Answer 1

If you want to import a css file from your node_modules folder use ~.

Install module: npm install normalize.css --save

And then import it in app.scss: @import '~normalize.css';

Be sure the entry point of the npm module is correct. You could also do something like @import '~normalize.css/path/to/build.css';