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

debugcn 发表于 Dev

乔·科克（Joe Koker）

你好，我是一个新手。问题是当我使用命令“ 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（{
            浏览器：['最近2个版本'] 
        }））. 
        pipe（gulp.dest（'app / css'
            流：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']，
            回调
        ）
    }）

目录树

     应用
      | -scss 
         |-styles.scss 
         |-_layout.scss 
         |-_homepage.scss 
         |-_profile.scss 
         |-_contact.scss 

       | -css

在styles.scss中，我有：


    橙色：＃f29528; 
    $ image：“ ../images/”; 

    @import'layout'; 
    @import'主页'; 
    @import'profile'; 
    @import'联系人';

mydo47

您不使用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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。