問題描述

我正在閱讀關于 sass 的教程 這里 然后我嘗試了其他一些方法，我無法在本教程中得到答案.有問題.我的 gulpfile.js 中有這段代碼

I'm reading a tutorial about sass here then I tried some other approach and I cant get the answer in this tutorial. Theres the problem. I have this code in my gulpfile.js

gulp.task('compileNavbar', function() {
    gulp.src('assets/css/sass/**/*.navbar.scss')
        .pipe(sass('navbar.css'))
        .pipe(gulp.dest('assets/css/'));;
});

到目前為止，我只有 assets/css/sass/guest.navbar.scss 并且此代碼正確定位了 scss 文件并將輸出 css 文件放在正確的目錄中但是 css 是命名為 guest.navbar.css 我沒想到.我希望將其命名為 navbar.css 但如何命名?

As of now, I only have assets/css/sass/guest.navbar.scss and this code locates the scss files correctly and puts the output css file in the correct directory BUT the css is named as guest.navbar.css which I didnt expect. I want it to be named as navbar.css but how to?

推薦答案

gulp-sass 不帶任何文件名參數(shù).使用 gulp-rename 重命名你的文件.如果您有多個 .navbar.scss 文件要連接成一個 navbar.css 文件，請隨意使用 gulp-concat.這個需要一個文件名參數(shù):-)

gulp-sass doesn't take any file name parameters. Use gulp-rename to rename your files. If you have more than one .navbar.scss files you want to concatenate into one navbar.css files, feel free to use gulp-concat. This one takes a file name parameter :-)

使用 npm install gulp-rename --save-dev

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

return gulp.src('assets/css/sass/**/*/*.navbar.scss')
   .pipe(sass())
   .pipe(rename('navbar.css'))
   .pipe(gulp.dest('assets/css');

或

使用 npm install gulp-concat --save-dev

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

return gulp.src('assets/css/sass/**/*/*.navbar.scss')
   .pipe(sass())
   .pipe(concat('navbar.css'))
   .pipe(gulp.dest('assets/css');

這篇關于Gulp Sass - 如何正確命名輸出 css?的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網(wǎng)！