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('浏览器同步'); var runSequence = require('run-sequence'); gulp.task('browserSync', function() { 浏览器同步（{ 服务器： { baseDir：'应用程序' } }) }) gulp.task('sass', function() { 返回 gulp.src('app/scss/**/*.scss') .pipe（自动前缀（{ 浏览器：['最后 2 个版本'] })) .pipe(gulp.dest('app/css')) .pipe(browserSync.reload({ 流：真 })); }) 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 |- 样式.scss |- _layout.scss |- _homepage.scss |- _profile.scss |- _contact.scss |-css

在 styles.scss 我有：

$橙色：#f29528； $image: "../images/"; @import '布局'; @import '主页'; @import '个人资料'; @import '联系人';

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 中目录 的路径。