用Node和Gulp注入SCSS變量

我想根據不同的sass變量編譯不同的css文件。用Node和Gulp注入SCSS變量

我試着用咕嘟咕嘟實現這一

gulp.task('var 1', function() { 
    gulp.src(['styles/vars/var1.scss','styles/client.scss']) 
     .pipe(sass().on('error', sass.logError)) 
     .pipe(concat('clientWithVar1.css')) 
     .pipe(gulp.dest('./public/')) 
});

它似乎沒有工作，即時得到一個Sass錯誤變量犯規存在。

我該如何做到這一點？任何幫助表示讚賞

來源

2017-05-09 Zolve

莫非你可能'@import 「瓦爾/ var1.scss」;'的'client.scss'文件的頂部（和刪除對'var1.scss'引用Gulp任務？ – Conan

我特別留下'@import「vars/var1.scss」;'所以我可以提供不同的變量並生成不同的'client.css'。一旦我解決了這個問題，我將有4個不同的變量文件的任務，然後希望一個任務合併這4個，並生成4個不同的變量的CSS文件。 – Zolve

你可以試試這個方法：

你有這樣的目錄結構：
- TMP（文件夾）
- _var1.scss
- _var2.scss
- client.scss

在client.scss中添加：@import "./tmp/var.scss
並在下面添加gulp任務，因此您只需將需要的變量複製並重命名爲scss文件，然後就可以編譯您的主scss文件

var rename = require('gulp-rename'); 
 

 
gulp.task('copy', function() { 
 
    return gulp.src('./styles/_var1.scss') 
 
      .pipe(rename('var.scss')) 
 
      .pipe(gulp.dest('./styles/tmp')); 
 
})

來源

2017-05-09 19:22:59

謝謝!!!!! – Zolve

假設你已經有了一個目錄結構是這樣的：

vars/var1.scss
vars/var2.scss
vars/var3.scss
vars/var4.scss
styles/1/client.scss
styles/2/client.scss
styles/3/client.scss
styles/4/client.scss

而且在每個client.scss文件，你都有相應@import聲明（例如@import "../../vars/var1/.scss";），你應該能夠生成所有樣式表在單個任務：

gulp.task('sass', function() { 
    gulp.src('styles/**/client.scss') 
     .pipe(sass().on('error', sass.logError)) 
     .pipe(gulp.dest('./public/')) 
});

我認爲這應該結束了public/1/client.css，public/2/client.css等，但你可能需要調整的gulp.dest線，以適應。

來源

2017-05-09 19:21:39 Conan

用Node和Gulp注入SCSS變量

回答

相關問題