Gulp-sass fails to compile scss file
Keep your imports as is, just pass the includePaths
option in your gulp sass module as an argument:
gulp.src('./_/sass/style.scss')
.pipe(sass({ includePaths : ['_/sass/'] }))
.pipe(gulp.dest('./'));
...should do it for you.
As per https://github.com/dlmanning/gulp-sass/issues/1
Jeshua
Coder, punner, infrequent runner. Schemer, thinker, all too frequent drinker http://jeshua.co/bio
Updated on July 16, 2022Comments
-
Jeshua almost 2 years
I'm using Gulp to compile my sass into css. A simple task compiles the
style.scss
file in the_/sass
directory and saves the output into the root of the project.style.scss
is used merely to import other files in the_/sass
directory.When I run the default task from the command line (
$ gulp
) I get an error that the sass can't compile. It is included below in full. I have removed all content from the included files and run the task again. I still receive the same error (something I read online suggested this might test for an encoding issue. I don't fully understand encoding and how that might break things in my scenario).I've also run from the command line
$ sass _/sass/style.scss style.css
which works perfectly with content in the included files. This suggests to me a problem with the gulp sass plugin itself.The relevant snippets from gulpfile.js:
var gulp = require('gulp'); var sass = require('gulp-sass'); // Compile sass files gulp.task('sass', function () { gulp.src('./_/sass/style.scss') .pipe(sass()) .pipe(gulp.dest('./')); }); // The default task (called when you run `gulp`) gulp.task('default', function() { gulp.run('sass'); // Watch files and run tasks if they change gulp.watch(['./_/sass/style.scss'], function() { gulp.run('sass'); }) });
The full contents of style.scss:
/* RESET */ @import '_/sass/reset'; /* TYPOGRAPHY */ @import '_/sass/typography'; /* MOBILE */ @import '_/sass/mobile'; /* MAIN */ @import '_/sass/main';
The directory structure:
├── _ │ ├── inc │ │ ├── stuff │ ├── js │ │ ├── otherstuff.js │ └── sass │ ├── main.scss │ ├── mobile.scss │ ├── print.scss │ ├── reset.scss │ ├── style.scss │ └── typography.scss ├── gulpfile.js └── style.css
Terminal spits out:
[gulp] Using file /Users/jeshuamaxey/project/dir/path/gulpfile.js [gulp] Working directory changed to /Users/jeshuamaxey/project/dir/path/html5reset [gulp] Running 'default'... [gulp] Running 'sass'... [gulp] Finished 'sass' in 3.18 ms [gulp] Finished 'default' in 8.09 ms stream.js:94 throw er; // Unhandled stream error in pipe. ^ source string:11: error: file to import not found or unreadable: 'reset'
-
Jeshua over 10 yearsThanks. This solved the particular problem I was experiencing. Sadly my configuration is still not working as intended, but I'll persevere. I like the look of Gulp a lot
-
max li over 10 yearsGulp-sass just updated with the new function that allow us to include path for @import npmjs.org/package/gulp-sass
-
sean over 8 yearsThis was the only thing that worked for me. THANK YOU!