他のGALPファイルをインポートするには？

Question

私のサスの構造はこのように見えます。

- /base 
    -- _fonts.scss 
    -- _all.scss 
    - /components 
    -- _all.scss 
    -- _header.scss 
    -- _footer.scss 
    - main.scss 

各_all.scssは現在のフォルダ内のすべてのファイルをインポートし、main.scssはすべての_allファイルを各フォルダからインポートします。

私が直面している問題は、gulpが.cssファイルを生成するためにmain.scssを実際に保存する必要があるということです。すべてのファイルを見ると、必要のない.cssファイルがたくさん生成されます。

gulpfile.js

'use strict'; 

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

gulp.task('sass', function() { 
    return gulp.src('./src/stylesheets/main.scss') 
    .pipe(sass().on('error', sass.logError)) 
    .pipe(gulp.dest('./public/css/')); 
}); 

gulp.task('sass:watch', function() { 
    gulp.watch('./src/stylesheets/main.scss', ['sass']); 
}); 

はどうすれば一気のすべてのファイルを見て、パブリックフォルダ内の唯一のCSSファイルを生成するのですか？

Answer 1

ここで私はそれをやっています。あなたのgulpfile.jsで

Main.scss

@import "your/relative/path/of/your/_partial-file1"; 
@import "your/relative/path/of/your/_partial-file2"; 

/*Other scss stylings if needed*/ 

、

gulp.task('css',()=>{ 

 return gulp.src('src/scss/*.scss') //target all the .css files in the specified directory 

   .pipe(sass()) //gulp-sass module to convert scss files into css file 

   .pipe(minifyCSS()) //method to minify the final css file 

   .pipe(gulp.dest('build/css')); //outputs final css file into the specified directory 

   console.log('CSS build'); 

}); 



gulp.task('default', [ 'css','your', 'other','tasks' ],()=>{ 

console.log("All done. Watching files..."); 



 //watch the files in the specified directory. 

 //if any changes are made to the files, the specified task will be executed in the watch method 

gulp.watch('src/**/*.scss',['css']); 

}); 

SASSタスクを追加ここに記事全文を検索：http://todarman.com/gulp-configuration-build-html-css-js/

は、この情報がお役に立てば幸いです。