Gulp-Sass Work Around for Load_Path Support

How to simplify the @import path for my npm sass package?

With Gulp and gulp-sass, people can specify includePaths

.pipe(sass({
    includePaths: [
        './node_modules/your-package-name'
    ]
}))

This will tell the compiler to always look for includes by appending that path to import as it is compiling.

Then in their *.scss files they only need to do

@import "your-package-name";

or

@import "your-package-name/variables";

Otherwise, I don't think it's possible with similar setup - after all, it's just an URL, unless they do some pre-processing, they would need to specify the full path to it

recursive paths for libsass

The problem was actually in my sass file. If my include path is

./project/components/controls/

and the sass file lives at

./project/components/controls/selectAgencies/_selectAgencies.scss then my .scss file should reflect the rest of the path, like so:

@import 'selectAgencies/selectAgencies'

When using SASS how can I import a file from a different directory?

UPDATE: Please consider Mikka's answer first - it should work without flaw if you're only interested in including subdirectories. My answer is specific to including directories other than subdirectories, but works for those, too. But: It's not the idiomatic way to do it.

---

Looks like some changes to SASS have made possible what you've initially tried doing:

@import "../subdir/common";

We even got this to work for some totally unrelated folder located in c:\projects\sass:

@import "../../../../../../../../../../projects/sass/common";

Just add enough ../ to be sure you'll end up at the drive root and you're good to go.

Of course, this solution is far from pretty, but I couldn't get an import from a totally different folder to work, neither using I c:\projects\sass nor setting the environment variable SASS_PATH (from: :load_paths reference) to that same value.

Ionic 2.0.0-beta.24 how can i import node_module css files without ionic.config.js

So just by posting this question it made me start tracing the documentation for ionic gulp sass-build task.

The example they provide was a great help. If I update the default gulpfile.js code around line 55 from:

gulp.task('sass', buildSass);

to

gulp.task('sass', function(){
  return buildSass({
    sassOptions: {
      includePaths: [
        'node_modules/ionic-angular',
        'node_modules/ionicons/dist/scss',
        'node_modules/leaflet/dist'
      ]
    }
  })
});

It solves my issue. I also needed to call @import "leaflet" in the page that needed the leaflet css.

---

Related Topics