mikevercoelen / gulp-sass-glob Goto Github PK

First off, Thanks for making this, super useful!

Just like the title says. I didn't see any section in the docs mentioning the order of imports. Is it alphabetical, by file modification time, etc...

And further is the order guaranteed? Basically, can we rely on it?

Would be helpful addition to the docs.

It would be great if the plugin could also support glob patterns that end with *.css, not just *.scss

Hello,

I am using this plugin for my project, and came to the need that this pull request solved:

0dad71c

This pull request is already in master and in the version 1.0.7, however the new patch has not been there yet published to npm.

would you publish it? or, when are you planning to do so?

Thanks in advance

Import files from directory works fine only in the root *.scss file.
When I try to import files from directory in the imported file - it gives and error.

@import "snippets/**/*.scss";

events.js:85
      throw er; // Unhandled 'error' event
            ^
Error: source/style/sections/admin/workers/_editor.scss
Error: File to import not found or unreadable: snippets/**/*.scss

But when I set specific file

@import "snippets/element-item";

Everything works fine.

If I push to gulp 1 file it's works well, but if I push array of files it's broken.

// works
gulp.task('sass', function () {
    gulp.src([assetsDir + 'sass/_includes.scss'])
        .pipe(plumber())
        .pipe(sassGlob())
        .pipe(sass())
        .pipe(gulp.dest(outputDir + 'styles/'))
});
// not
gulp.task('sass', function () {
    gulp.src([assetsDir + 'sass/**/*.scss'])
        .pipe(plumber())
        .pipe(sassGlob())
        .pipe(sass())
        .pipe(gulp.dest(outputDir + 'styles/'))
});

messageOriginal: File to import not found or unreadable: blocks/**/*.scss

Hello,

Just a quick one to inform you that nested globbing appears to be working if you combine this package with another (node-sass-globbing)

Below is a simplified untested version of my approach but it should work all the same.

var gulp = require('gulp'),
    nodeSassGlobbing = require('node-sass-globbing'),
    sass = require('gulp-sass'),
    sassGlob = require('gulp-sass-glob');

gulp.src('some/scssfile.scss')
    .pipe(sassGlob())
    .pipe(sass({
        importer: nodeSassGlobbing
    }))
    .pipe(gulp.dest('build'))

It may be worth carrying out some tests on this and adding a note to this packages README.

Hope it helps some out!

Hi,
After new updates, old problem solved but generated file has lots of problem and sass codes compiled incorrectly. I can't found problem can you help me?

Thanks

gulp-sass has support for the includePaths option through node-sass. Refer to the documentation for details.

Unfortunately there's no possibility for gulp-sass-glob to know about this. So it fails when handling globs from locations defined in there.

I think it would be straightforward for this plugin to add support for this feature.

Hello! Thanks for the excellent module! It would save me a ton of time if it weren't for the Windows error:

When I connect files or folders on the same level as main.scss, for example, @import "helpers/**"; then everything works well, but if the connected folder or file was one level higher from main.scss, for example, @import "../helpers/**"; then the module does not work and an error is shown that it cannot find the file, also the error message indicates the path to the connected file without path slashes.

Please tell me how to solve this problem?

P.S. There is no such problem on Linux.

Running Mac OS/X El Capitan

Code from example:

var gulp = require('gulp');
var sass = require('gulp-sass');
var sassGlob = require('gulp-sass-glob');

gulp.task('styles', function () {
  return gulp
    .src('src/styles/main.scss')
    .pipe(sassGlob())
    .pipe(sass())
    .pipe(gulp.dest('dist/styles'));
});

Run with
gulp styles

Error message:

[15:34:57] Starting 'styles'...
[15:34:57] 'styles' errored after 7.27 ms
[15:34:57] TypeError: sassGlob is not a function
    at Gulp.<anonymous> (/Users/hannes/Sites/apkr/drupal/current/gulpfile.js:8:11)
    at module.exports (/Users/hannes/Sites/apkr/drupal/current/node_modules/orchestrator/lib/runTask.js:34:7)
    at Gulp.Orchestrator._runTask (/Users/hannes/Sites/apkr/drupal/current/node_modules/orchestrator/index.js:273:3)
    at Gulp.Orchestrator._runStep (/Users/hannes/Sites/apkr/drupal/current/node_modules/orchestrator/index.js:214:10)
    at Gulp.Orchestrator.start (/Users/hannes/Sites/apkr/drupal/current/node_modules/orchestrator/index.js:134:8)
    at /usr/local/lib/node_modules/gulp/bin/gulp.js:129:20
    at nextTickCallbackWith0Args (node.js:453:9)
    at process._tickCallback (node.js:382:13)
    at Function.Module.runMain (module.js:449:11)
    at startup (node.js:140:18)

package.json

{
  "name": "ap",
  "version": "1.0.0",
  "description": "",
  "main": "gulpfile.js",
  "dependencies": {},
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-sass": "^2.2.0",
    "gulp-sass-glob": "^1.0.3"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+ssh://[email protected]/mekaia/handbooks-core.git"
  },
  "author": "",
  "license": "ISC",
  "homepage": "https://bitbucket.org/mekaia/handbooks-core#readme"
}

Hello,

It'd be awesome if gulp-sass-glob allowed you to do something like this (comma separated, and can be on multiple lines) like regular Sass:

@import "mixins/*", "settings/*", "styleguide/*", "layout/*", "classes/*", "components/*", "pages/*" ;

As it's much neater than having many @imports...

Kind regards

Hi there, are there any plans to support the new sass module system? Thank you!

Hello,

I have all my imports set-up, the first one being 'variables.scss' where all my Sass variables are.

I them import all my other files which use the variables, but when I'm using gulp-sass-glob to import these files within the directories, it just errors, saying that the variable isn't defined.

Please help!

Kind regards

This works:

@import 'mixins/**/*.scss';

but this doesn't:

@import 'mixins/**/*.scss'; // hello

The second example results in this error:

Error in plugin 'sass'
Message:
src\sass\styles.scss
Error: File to import not found or unreadable: mixins/**/*.scss

which I'd assume just means that gulp-sass-glob hasn't recognised (and thus, expanded) the @import on that line.

Hello guys!,
I'm using your module into my gulp workflow like in the examples:

gulp.task('stylesheets', function () {
    return gulp
      .src('./client/web/public/dev/css/style.scss')
      .pipe(sassGlob())
      .pipe(sass())
      .pipe(gulp.dest('./client/web/public/production/css'))
})

In the style.scss, I have the following imports:

@import 'mixins/**/*.scss';
@import 'components/**/*.scss';
@import 'plugins/**/*.scss';

mixins, components and plugins are all in the folder inside the style.sccs like this:

.
├── components
│   ├── body.scss
├── mixins
│   ├── animations.scss
├── plugins
│   └── chat.scss
├── style.scss

So what is causing the errors? Because the files exist.

Thank you.
Jorge.

9326d5d#diff-168726dbe96b3ce427e7fedce31bb0bc

Given:

path/element-a/_file.scss
path/element-b/_file.scss
path/component-a/_file.scss
path/component-b/_file.scss

Is there a way to do this?

@import 'path/element-*/_file.scss';
@import 'path/component-*/_file.scss';

Where the wildcard is in a path.

Is it possible to exclude a file? I want the reset.scss to be called first. I can live with the fact that I need to call it with a special import rule first.

But then I want to exclude it from the search if possible? It now looks like this:

@import 'reset.scss';
@import '../../**/snippets/**/*'; // Exclude reset somehow?

Hello, I'm aware that files are automatically alphabetically sorted before being imported.

Is there any way for us to be able to control how the order of sorting? I ask because there are times when global styling should be declared before unique selector styling. But with auto alphabetizing, the global styles can be meshed up in the middle of the ordering.

If this is not possible with sass globbing, are there workarounds? For example, are there file naming structures that you'd recommend so that the ordering could somewhat be controlled (such as including numbers), with global styles rendering first?

I have error using with path like that

@import "**/*"; 
 Error: File to import not found or unreadable: d:/Work/PHPSTORM/gulp/app/modules/block_block.scss

Hi,

I've spent a lot of time today trying to use a gulp sass globbing tool and finally found out that your package is awesome.

However, my SCSS file structure is as follows:
SCSS
└──base
└──components
└──styles.scss
└──_styles-main.scss

In my styles.scss i only include
@charset 'UTF-8'; @import 'styles-main';

and including all the rest goes inside _styles-main.scss:
//Base @import 'base/*'; // Components @import 'components/*';

Problem is that "@import components/*" works only when I include it in the styles.scss and does not when i include it in _styles-main.scss.

Can this issue be solved?

I have:

app
  `--/scss
    `--/main.scss
  `--/component
    `--/_file.scss
  `--/ignore
  gulpfile.js

and I'm trying to do:

sassGlob({
            ignorePaths: [
                'app/ignore',
                'app/scss/*.scss' // this aint working.
            ]
        }

and including everything out of my scss folder like this in my main.scss:

@import '../**/*.scss';

It results in a regular sass error @import loop has been found; I assume as a sass error, not sassGlob. (It's importing itself >> @import "main.scss";)

But could this be targeted here? Thanks.

BTW, amazing plugin! Thanks!

When I use gulp-watch and remove a SCSS file, gulp instantly breaks and and error is pointing to node_modules/gulp-sass-glob/index.js:18 and this line:

var contents = file.contents.toString('utf-8');

Is there a fix for this?

I have gulpfile.js with a sass task like so:

gulp.task('sass', function() {
  return gulp.src('scss/style.scss')
    .pipe(sassGlob())
    .pipe(debug({title: 'glob'}))
    .pipe($.sass()
      .on('error', $.sass.logError))
    .pipe($.autoprefixer({
      browsers: ['last 2 versions', 'ie >= 9']
    }))
    .pipe(debug({title: 'unicorn'}))
    .pipe(gulp.dest('css'));
});

Sometimes, I think it only happens when saving a new partial, it seems to take too long to glob, and when the sass is run, the files is still being written.

[18:11:28] Starting 'sass'...
[18:11:28] glob scss/style.scss
[18:11:28] glob 1 item

Error in plugin 'sass'
Message:
    scss/style.scss
Error: File to import not found or unreadable: utils/**/*.
       Parent style sheet: /var/www/html/web/themes/custom/truefit/scss/style.scss
        on line 1 of scss/style.scss
>> @import "utils/**/*";
[18:11:28] unicorn 0 items
[18:11:28] Finished 'sass' after 13 ms

When I re-save the partial, there is no error.

[18:12:09] Starting 'sass'...
[18:12:09] glob scss/style.scss
[18:12:09] glob 1 item
[18:12:09] unicorn scss/style.css
[18:12:09] unicorn 1 item
[18:12:09] Finished 'sass' after 7.64 ms

I am not sure if the first one takes 13ms because it's catching / writing the error, or if because it takes longer to glob a new file.

Thoughts?

just for development purposes rewrite with es6 + linter settings

add unit tests

It's easier to keep track of what happens when releases are in sync with what happens on NPM: https://github.com/tomgrooffer/gulp-sass-glob/releases

firstly thanks for awesome plugin. at my project i watch ./src/style.scss and all global includes working fine except above like

@import "../app/component/**/*.scss";

this command importing the files but not watching. when i re-save root scss file it's updating.

Globs within line comments get parsed like that:

// @import "util/functions/**/*.scss";

// @import "util/functions/_list-contains.scss";
@import "util/functions/_str-split.scss";
@import "util/functions/_strip-unit.scss";

This is probably causing the bug: /@import\s+["']([^"']+\*(\.scss|\.sass)?)["'];?/

I would love to fix the used regex to exclude those matches, but I haven't found any useful regex patterns and I'm not good enough at finding a solution myself :/

Maybe this will help you as a starting point: https://regex101.com/r/kH8mZ0/2

The plugin is throwing an error when I import any file or glob after importing an empty directory.

I have files in every directory except typography and components, which are empty directories.

main.scss

// Import external dependencies
@import 'imports/**/*.scss';

// Register functions and mixins
@import '_lib/functions/**/*.scss';
@import '_lib/mixins/**/*.scss';

// Load configuration
@import '_config/**/*.scss';

// Generate styles
@import 'typography/**/*.scss'; // empty dir
@import 'components/**/*.scss'; // empty dir

Output Log

Error in plugin 'sass'
Message:
    scss/style.scss
Error: File to import not found or unreadable: components/**/*.scss
       Parent style sheet: <REMOVED>/scss/style.scss
        on line 29 of scss/style.scss
>> @import 'components/**/*.scss';
   ^

If nothing else is imported after the first empty directory, then no error is thrown:

main.scss

// Import external dependencies
@import 'imports/**/*.scss';

// Register functions and mixins
@import '_lib/functions/**/*.scss';
@import '_lib/mixins/**/*.scss';

// Load configuration
@import '_config/**/*.scss';

// Generate styles
@import 'typography/**/*.scss'; // empty dir
// @import 'components/**/*.scss'; // empty dir, not imported

Output Log

Finished 'styles' after 119 ms