Importing SASS partials from node_modules

Question

Trying to build custom workflow with gulp, panini, mustache, sass and one of my problem is including partials from node_modules, here is example from main.scss file:

@import "node_modules/bootstrap/scss/mixins";
@import "settings";

How to avoid typing full path to _mixins.scss?

Answer 1

You can include node_modules in sass pathes:

.pipe(sass({
  includePaths: ['node_modules']
})

Then you can import library's sass like this:

@import "bootstrap/scss/bootstrap";

Or, in case of material-components-web:

@import "@material/top-app-bar/mdc-top-app-bar";

This way:

• you don't need to add each lib to path
• the sub-dependencies imports will work seamlessly, e.g. mdc-top-app-bar in MDC example imports "@material/elevation/mixins".

Answer 2

Your question is similar to this: Sass import not crawling node_modules to find appropriate package

You can include paths by passing the includePaths argument to gulp sass. e.g

.pipe($.sass({
  includePaths: ['node_modules/bootstrap/scss/', 'another/path']
})