CODEWITHSUNDEEP
sassgulp
LubimoeTwoe
LubimoeTwoe

Reputation: 21

gulp sass relative paths

sass gives an error message

Error: File to import not found or unreadable: helpers/mixins.scss
   Parent style sheet: .../temp/styles/all.scss
    on line 1 of temp/styles/all.scss
>> @import 'helpers/mixins.scss';
   ^

at this point, the code looks like

@import 'helpers/mixins.scss';
@import 'helpers/variables.scss';
@import 'helpers/fonts.scss';
@import '../../node_modules/bootstrap/scss/bootstrap';
@import '../../node_modules/fotorama/fotorama.css';

.navbar {
  @extend navbar-light;
  @extend bg-faded;
}

gulp task looks like this

var blocks = 'app/blocks/**/*.scss';

gulp.task('styles', () => (
gulp.src(['app/styles/app.scss', blocks])
    .pipe(concat('all.scss'))
    .pipe(sass({
        errLogToConsole: true,
        indentedSyntax: false
    }))
    .pipe(gulp.dest('temp/styles'))
));

How to solve this problem? how to make galp correctly understand the way?

Upvotes: 1

Views: 1886

Answers (1)

Davey
Davey

Reputation: 2514

In your gulp file you can declare sass paths, eg.

var sassPaths = [
  'node_modules/bootstrap/scss',
  'node_modules/fotorama'
];

These are relative to your gulp file.

Then set include paths inside your list of sass arguments

.pipe(sass({
    errLogToConsole: true,
    indentedSyntax: false,
    includePaths: sassPaths
}))

Then in your sass make sure your imports are either relaitve to the parent sass file or relative to one of the include paths.

Upvotes: 1

Related Questions