Problem in the execution of the task with Gulp & SASS?

Asked

Viewed 89 times

1

I am creating a task that compiles, renames and simplifies files .scss for .css. My file structure is like this:

assets/
|__ css/
|__ sass/
|   |__ uma-pasta/
|   |   |__ alguns.scss
|   |   |__ arquivos.scss
|   |   |__ vão.scss
|   |   |__ aqui.scss
|   |__ outra-pasta/
|       |__ alguns.scss
|       |__ outros.scss
|       |__ arquivos.scss
|       |__ vão.scss
|       |__ aqui.scss
|__ _variables.scss

But when I perform the following task:

gulp.task('sass', function() {
    gulp.src(['!assets/sass/outra-pasta/**/*.scss', 'assets/sass/**/*.scss'])
        .pipe(sass().on('error', sass.logError))
        .pipe(rename({ suffix: '.min' }))
        .pipe(minify())
        .pipe(gulp.dest(PATH + 'assets/css'))
});

The variables located in the assets/sass/_variables.scss are not concatenated with the other files, and then I get the following error:

Error in plugin 'sass'
Message:
    assets/sass/uma-pasta/arquivos.scss
Error: Undefined variable: "$variable".
    on line 3 of stdin
>>  width: $variable;
--------^

And the file assets/sass/_variables.scss is that way:

$variable: 20px;

1 answer

1

I confess I never used gulp, but if the logic is the same as grunt, I believe you should start by inserting the variable file before inserting the other files. Try the following:

gulp.src([
    'assets/sass/variables.scss', 
    'assets/sass/**/*.scss'
])

If you have other files still in the root folder, just use something like this:

gulp.src([
    'assets/sass/variables.scss', 
    'assets/sass/*.scss', 
    'assets/sass/**/*.scss'
])

So variables will exist for all files.


Edited:

Another observation, I don’t know if it was your mistake when passing the question to the OS or if it really is the error. But the log says that you did not find the variable $minhavariavel and the name you gave next was: $variable. Make sure there is no syntax error with the variable names.

  • So it didn’t really work :/ I have no idea how I can do this in a smart way. And really that mistake of the variables was my fault, I got confused in the issue of the question but I already tidied up. Anyway thank you very much!

  • But what does he present of error now? The same thing?

  • Yes! He keeps presenting the same error :/

  • The solution I could find was to give @include of variables within each file .scss. 'Cause from what I’ve been seeing around, the module of Gulp-Sass interprets each file individually, that is to say it compiles the variables but it stays in the scope of the file making them NOT GLOBAL, and so I do not have access to other files.

  • In Grunt I know there is this function, but it is through a module. But even so, the logic of including variables first is valid, even with @include =D

  • Yeah, well... the only problem in my mind right now is that if your way had worked, I’d have to write down the only way to the variables once and that’s it! This way I need to always be importing them into the file.

Show 1 more comment

Browser other questions tagged

You are not signed in. Login or sign up in order to post.