14

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?

RomkaLTU
  • 3,683
  • 8
  • 40
  • 63

4 Answers4

20

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']
})
Community
  • 1
  • 1
Davey
  • 2,355
  • 1
  • 17
  • 18
17

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".
Artem Vasiliev
  • 2,063
  • 1
  • 24
  • 21
1

Use includePaths or you could resolve NPM modules like this:

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

There are some libraries for this sass-globbing, but I personally don't like this approach, because in CSS matters on import order.

Best practice is IMHO create some file vendor.scss;

@import "~bootstrap/scss/mixins";
@import "~bourbon/...";

and then import this vendor.scss:

@import "vendor.scss"

@import "partials/..."
jukben
  • 1,088
  • 7
  • 16
  • There is a way, check out gulp-sass includePaths – Davey Jan 14 '17 at 21:21
  • True, I'm complete forget about it. – jukben Jan 15 '17 at 08:10
  • In my case this is not working `File to import not found or unreadable: ~bootstrap/scss/functions`. Can you provide a gulpfile.js? – muuvmuuv Mar 14 '19 at 10:01
  • 1
    Hey @muuvmuuv you might need something like this https://www.npmjs.com/package/node-sass-package-importer. It has been some time since I used SASS last time. – jukben Mar 14 '19 at 12:12
  • Yeah, after searching the web a bit I found similar packages but finally I wrote my own (4 lines long). Anyway thanks! – muuvmuuv Mar 14 '19 at 16:08
  • 1
    @muuvmuuv I think `~` is not supposed to be there, `"bootstrap/scss/bootstrap"` – neca Aug 18 '20 at 09:35
1

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/']
hobberwickey
  • 6,118
  • 4
  • 28
  • 29