Gulp Sass - 如何正确命名输出css？ [英] Gulp Sass - How to properly name the output css?

问题描述

我正在阅读关于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/'));;
});

到目前为止，我只有资产/ 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 不会接受任何文件名参数。使用 gulp-rename 重命名您的文件。如果您有多个 .navbar.scss 文件要连接成一个 navbar.css 文件，请随意使用 gulp-concat 。这一个需要一个文件名参数： - ）

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安装 gulp-rename install gulp-rename --save-dev

Install gulp-rename with 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');

b $ b

或

or

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

Install gulp-concat with 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？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！