Search code examples
gulpgulp-sasslaravel-elixirlibsass

How to import directory in libsass

I am trying to import several SCSS files(page1.scss, page2.scss and ..) in my app.scss but I haven't found any solution(plugin and etc).

enter image description here

I saw these answers but they are for Ruby on Rails not libsass. I am using:

Gulp,

Gulp-sass,

Libsass and

Laravel Elixir

Any solution?

Solution

  • Long answer short:

    As you can find in this issue in the official libsass project github, globs are not part of SASS specification, so there are no plans to support them in libsass.

    why?

    The main concern about implementing this feature is related with the order importing the files. In first place, AFAIK there isn't a standard way on how reading stream files behave in different OSs (linux, mac os x, windows) or filesystems (reiserfs, ext3, ntfs, fat32, etc.), what leads to a unpredictable ordering while importing the files.

    Anyway, even if there will be some sort of cross-platform standard support to read files from every filesystem and you are sure you are always gonna get the files in the same order. Which order should it be?.

    if you still need/want it:

    Still there are some hack-y ways you can achieve this behaviour but I will strongly recommend to avoid them and follow the official recommendations.

    There is a ruby gem: sass-globbing. But it doesn't works with gulp/libsass because of the different way they handle files streams. Inspired on this ruby-gem there is gulp-css-globbing. It looks like this project is a bit outdated, but you can use it on your own risk.
    And in this blog post: Sass Directory Imports With Gulp, you can find another solution that involve automatically creating a file per folder that imports all files inside. A bit convoluted for my taste but it will work if you really need this.