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