mikevercoelen / gulp-sass-glob Goto Github PK
View Code? Open in Web Editor NEWUse glob includes in sass
Use glob includes in sass
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?
Hi there, are there any plans to support the new sass module system? Thank you!
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.
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,
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!
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
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
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?
It would be great if the plugin could also support glob patterns that end with *.css, not just *.scss
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
just for development purposes rewrite with es6 + linter settings
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
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
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!
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
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?
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
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.
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,
I am using this plugin for my project, and came to the need that this pull request solved:
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
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?
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 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.
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.
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.
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.