Gulp-sass 不会将 scss 文件编译到 css 而是将所有文件从 scss 文件夹复制到 css 文件夹

Question

你好，我是 gulp 的新手。问题是当我运行默认任务使用命令 "gulp" scss 文件不编译而是复制到 css 文件夹这是我的 gulpfile.js


    var gulp = require('gulp');
    var sass = require('gulp-sass');
    var autoprefixer = require('gulp-autoprefixer');
    var browserSync = require('browser-sync');
    var runSequence = require('run-sequence');

    gulp.task('browserSync', function() {
        browserSync({
            server: {
                baseDir: 'app'
            }
        })
    })

    gulp.task('sass', function() {
        return gulp.src('app/scss/**/*.scss') 
        .pipe(autoprefixer({
            browsers: ['last 2 versions']
        }))
        .pipe(gulp.dest('app/css'))
        .pipe(browserSync.reload({
            stream: true
        }));
    })

    gulp.task('watch', function() {
        gulp.watch('app/scss/**/*.scss', ['sass']);
        gulp.watch('app/*.html', browserSync.reload); 
        gulp.watch('app/js/**/*.js', browserSync.reload); 
    })


    gulp.task('default', function(callback) {
        runSequence(['sass', 'browserSync', 'watch'],
            callback
        )
    })

目录树

     app
      |-scss
         |- styles.scss
         |- _layout.scss
         |- _homepage.scss
         |- _profile.scss
         |- _contact.scss

       |-css

在 styles.scss 我有 :


    $orange: #f29528;
    $image: "../images/";

    @import 'layout';
    @import 'homepage';
    @import 'profile';
    @import 'contact';

Answer 1

您没有使用 sass() 。尝试：

gulp.task('sass', function() {
    return gulp.src('app/scss/**/*.scss')
    .pipe(sass().on('error', sass.logError)) 
    .pipe(autoprefixer({
        browsers: ['last 2 versions']
    }))
    .pipe(gulp.dest('app/css'))
    .pipe(browserSync.reload({
        stream: true
    }));
})

阅读更多gulp-sass

Answer 2

我正在使用它作为我的项目任务处理程序和 files.scss 并且对我的 ATM 来说工作得很好。我希望它也对你有用。

'use strict'

// @requesting packages
const gulp         = require('gulp');
const sass         = require('gulp-sass');
const autoprefixer = require('gulp-autoprefixer');
const sourcemaps   = require('gulp-sourcemaps');
const cleancss     = require('gulp-clean-css');

// @gulp task
gulp.task('sass', () =>
    gulp.src('./scss/**/*.scss')
        .pipe(sass({
            outputStyle: 'nested',
            sourceComments: false
        }))
        // *** The debug function isn't needed you can delete it if you want
        .pipe(cleancss({debug: true}, function(details) {
            console.log(details.name + ': ' + details.stats.originalSize);
            console.log(details.name + ': ' + details.stats.minifiedSize);
        }))
        .pipe(autoprefixer({
            versions: ['last 2 browsers']
        }))
        .pipe(sourcemaps.init())
        .pipe(sass().on('error', sass.logError))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('./css'))
); 

// @gulp watch task
gulp.task('default', () => {
    gulp.watch('./scss/*.scss', ['sass']);
});

记得更改sass route中目录的路径。

Gulp-sass 不会将 scss 文件编译到 css 而是将所有文件从 scss 文件夹复制到 css 文件夹

Gulp-sass won't compile scss files to css instead copy all files from scss folder to css folder

css

sass

gulp

gulp-sass