gulp-ruby-sass @import while compiling a unique file

Question

I am using Gulp with gulp-ruby-sass to compile scss files. The project's folder looks like:

css/
    scss/
        grid.scss
        styles.scss
    styles.css
node_modules/
    .bin/
        ...
    gulp/
        ...
    gulp-ruby-sass/
        ...
gulpfile.js
index.html

gulpfile.js :

// Load plugins
var gulp = require( 'gulp' ),
    sass = require( 'gulp-ruby-sass' );

// Styles
gulp.task( 'styles', function () {
  return gulp.src( 'css/scss/styles.scss' )
    .pipe( sass( { style : 'compressed' } ) )
    .pipe( gulp.dest( 'css/' ) );
});

css/scss/styles.scss:

@import 'grid';

css/styles.css trace the error "File to import not found or unreadable: grid".

The documentation recommends to include all required .scss file in the gulp.dest() glob so did I:

// Load plugins
var gulp = require( 'gulp' ),
    sass = require( 'gulp-ruby-sass' );

// Styles
gulp.task( 'styles', function () {
  return gulp.src( 'css/scss/*.scss' )
    .pipe( sass( { style : 'compressed' } ) )
    .pipe( gulp.dest( 'css/' ) );
});

It works perfectly fine now but every .scss files are compiled and exported as .css files while I just want the styles.scss file to be exported as styles.css.

How could I do it? Should I stick with every files being exported?

---

EDIT: I made several attempts using "loadPath" but the path seems to be relative to the gulp-ruby-sass folder and not the project:

/private/var/folders/tb/tlvf2ysj21x49qb1h3fgbjz00000gn/T/gulp-ruby-sass/

Answer 1

You need to use scss partials naming convention, this is, start with an underscore (_), so you tell Sass that files must not be compiled itself.

Rename grid.scss to _grid.scss

styles.scss stays since you want it compiled.

Import as @import 'grid';