Importing non SCSS/Sass files about gulp-ruby-sass

[robwierzbowski]

Can you ensure it's working with a standalone sass command and then post that command and your glob here?

[robwierzbowski]

Since this plugin dumps all the files in your glob into a temporary directory then runs the Sass command you supply it it should do everything Sass can do as-is.

[osilviotti]

Yeah, it definitely works with the standalone command.

The folder structure I have is:

- styles/
    - Default.scss
- config.json
- gulpfile.js

This command gives the desired output:

sass Default.scss -r sass-json-vars > Default.css

and here's the relevant part of my gulpfile:

return gulp.src(['styles/**/*.scss', 'config.json'])
        .pipe(sass({ style: 'compact', sourcemap: true, require: ['sass-json-vars'] }))
        .pipe(gulp.dest(buildLocation));

and the error + stack trace:

[gulp] Error in plugin 'gulp-ruby-sass': 
Syntax error: File to import not found or unreadable: ../config.json
<snip>
on line 1 of Default.scss
at ChildProcess.<anonymous> (/Users/ollie/Documents/rewrite/partners/Default/node_modules/gulp-ruby-sass/index.js:98:25)

at ChildProcess.EventEmitter.emit (events.js:98:17)
at maybeClose (child_process.js:743:16)
at Socket.<anonymous> (child_process.js:956:11)
at Socket.EventEmitter.emit (events.js:95:17)
at Pipe.close (net.js:465:12)

[robwierzbowski]

I notice that if I remove the sass step and run:

return gulp.src(['styles/**/*.scss', 'config.json'])
        .pipe(gulp.dest(buildLocation));

the json file doesn't appear in the output destination. If I put config.json in with the other Sass files it works fine.

I suspect this is a gulp limitation. If you give src a glob styles/**/*.scss and pipe to a directory it removes the styles path and replaces with your destination directory. It probably removes the other top level file while it's at it.

[osilviotti]

That's odd - using the gulp config you pasted, the json file does get put into my output directory along with the 2 scss files in the 'styles' directory

[robwierzbowski]

├── gulpfile.js
├── node_modules
│   └── etc...
├── package.json
├── scss
│   ├── _partial.scss
│   └── app.scss
└── vars.json

var gulp = require('gulp');

gulp.task('default', function() {
    gulp.src('scss/*.scss', 'vars.json')
        .pipe(gulp.dest('css'));
});

├── css
│   ├── _partial.scss
│   └── app.scss
├── gulpfile.js
├── node_modules
│   └── etc...
├── package.json
├── scss
│   ├── _partial.scss
│   └── app.scss
└── vars.json

This looks like the example you gave. Are you doing anything different?

[osilviotti]

The task as you've written it doesn't pass through the json file, but writing it like this:

gulp.task('default', function() {
    gulp.src(['scss/*.scss', 'vars.json'])
        .pipe(gulp.dest('css'));
});

i.e passing gulp.src an array does pass it through. I think you're right about this being an issue with how gulp handles files

[robwierzbowski]

Ah, too much coffeescript :P. Thanks.

├── css
│   ├── _partial.scss
│   ├── app.scss
│   └── vars.json
├── gulpfile.js
├── node_modules
│   ├── gulp
│   └── gulp-ruby-sass
├── package.json
├── scss
│   ├── _partial.scss
│   └── app.scss
└── vars.json

As you can see, vars.json ends up in the same directory, instead of a directory above as you've referenced it in your SCSS. I'll take a look and see what's happening.

[robwierzbowski]

How do you think this should be resolved? Gulp flattens that structure — it outputs the glob and the named file to the same directory. This plugin has an intermediate step that writes the gulp files to disk, currently the same way gulp.dest() does, then runs the sass command on them.

We could copy the original file structure to the intermediate directory but I don't think we can use any magic to discern which directory a user expects the Sass task to be run on (in your case root or scss). In the above task I'm guessing you're expecting the CSS files to be output in css/, not in css/scss. The only way I can think of making this work is to add a dirToRunTheSassCommandOn™ option that defaults to ., and let the user decide in edge cases.

That adds more complexity to the plugin, but I don't see another way.

[robwierzbowski]

@sindresorhus, do you think adding an option for this is an acceptable complication? We'd have to document the edge cases it's useful for, but otherwise we'd have to document the edge cases that the current setup fails on.

[sindresorhus]

You can set {base: '.'} in gulp.src to change the glob base to be the top level.

[sindresorhus]

I really don't want an additional option for this.

[robwierzbowski]

Ya, me either. Let me play around with it a little and at the very least
come up with a recipe that takes care of this particular situation.

On Sunday, June 29, 2014, Sindre Sorhus [email protected] wrote:

I really don't want an additional option for this.

—
Reply to this email directly or view it on GitHub
#64 (comment)
.

Rob Wierzbowski
@robwierzbowski http://twitter.com/#!/robwierzbowski
http://github.com/robwierzbowski
http://robwierzbowski.com

[osilviotti]

It's probably too obscure of a use case to add an extra option for. I'm not sure, if all the files are being copied to the same location, why importing the json file as if it were in the scss directory does't work either - @import config.json instead of @import ../config.json

[robwierzbowski]

It's working for me.

gulp.src(['scss/*.scss', 'vars.json']) outputs Sass files and vars.json in the same directory.
@import './vars.json' imports the file and makes it available.

https://github.com/robwierzbowski/gulp-ruby-sass-maps-test/tree/43cba82a7d79f00da607fa4a208dd28643b01453

Maybe you need the ./?

[osilviotti]

Thanks a lot for that @robwierzbowski - I've cloned that repo and got it compiling fine but my project still isn't, even using the exact code from your example so it must be something with my particular environment