1

Estou criando uma tarefa que compila, renomeia e simplifica os arquivos .scss para .css. Minha estrutura de arquivos está assim:

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

Porém quando eu executo a seguinte 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'))
});

As variáveis localizadas no assets/sass/_variables.scss não são concatenadas com os outros arquivos, e então eu recebo o seguinte erro:

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

E o arquivo assets/sass/_variables.scss está dessa maneira:

$variable: 20px;
0

1 Resposta 1

1

Confesso que nunca usei gulp, mas se a lógica for a mesma do grunt, acredito que você deva começar por inserir o arquivo de variáveis antes de inserir os demais arquivos. Tente o seguinte:

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

Caso você tenha outros arquivos ainda na pasta raiz, basta usar algo assim:

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

Assim as variáveis irão existir para todos os arquivos.


Editado:

Outra observação, não sei se foi erro seu na hora de passar a questão para o SO ou se realmente é o erro. Mas o log diz que não encontrou a variável $minhavariavel e o nome que você deu em seguida foi: $variable. Certifique-se de não haver nenhum erro de syntax com os nomes das variáveis.

6
  • Então na realidade não funcionou :/ Não tenho ideia de como posso fazer isso de uma maneira inteligente. E realmente aquele erro das variáveis foi minha culpa, me confundi na edição da pergunta mas já arrumei. De qualquer maneira muito obrigado! Commented 15/01/2016 às 20:24
  • Mas o que ele apresenta de erro agora? A mesma coisa? Commented 15/01/2016 às 20:34
  • Sim! Ele continua apresentando o mesmo erro :/ Commented 15/01/2016 às 20:38
  • A solução que consegui encontrar foi dar @include das variáveis dentro de cada arquivo .scss. Pois pelo que eu andei vendo por ai, o módulo do gulp-sass interpreta cada arquivo individualmente, ou seja ele compila as variáveis porém ele fica no escopo do arquivo tornando elas NÃO-GLOBAIS, e assim não tenho acesso em outros arquivos. Commented 15/01/2016 às 20:43
  • No grunt eu sei que existe essa função, mas é através de um módulo. Mas mesmo assim, a lógica de incluir primeiro as variáveis está valendo, mesmo com o @include =D Commented 15/01/2016 às 20:44

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .