Importing SASS partials from node_modules

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']
})

For anyone else that stumbles here, if you're using gulp-ruby-sass instead of node-sass you would use

loadPath: ['node_modules/bootstrap/scss/']

instead of

includePaths: ['node_modules/bootstrap/scss/']

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".

Related