Gulp Sass - 如何正确命名输出 css?

2022-01-12 00:00:00 css sass gulp

我正在阅读关于 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 不带任何文件名参数.使用 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 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');

相关文章