当前位置: 首页 > 知识库问答 >
问题:

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

刁越
2023-03-14

你好,我是一个很新的一大口。问题是当我用命令“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

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

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

共有1个答案

吕森
2023-03-14

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

阅读更多胡言乱语

 类似资料:
  • 我当前正在设置我的gulpfile,而当watch任务正在运行scss任务时,我遇到了gulp-sass的问题。 这就是我的gulpfile.js的样子: 我在控制台中得到的错误: 基本错误是:未找到或无法读取要导入的1:9文件:./src/scss/modules/modules_base.scss 应用程序的结构:

  • 我有一个Windows文件夹结构和文件,如下所示 c:\源文件\file1.txt c:\源文件夹\subfolder1\file2.txt c:\源文件夹\子文件夹2\file3.txt 我想复制所有文件到目标文件夹,如下所示 c:\DestinationFile\file1.txt c:\DestinationFile\file2.txt c:\DestinationFile\file3.tx

  • 我在angular 2项目上工作过,并使用了angular-CLI。我想用SCSS替换所有的css文件。做这件事最简单的方法是什么?或者是否有一个命令行可以处理它而不需要手动。

  • 问题内容: 我有如下gulp任务脚本, 如何将src / css中的所有css文件最小化为dist / css / style.min.css的单个文件? 问题答案: 您的gulp任务缺少concat管道。 这是有关使用gulp进行构建的很好的教程: http://www.smashingmagazine.com/2014/06/11/building-with- gulp/

  • 问题内容: 无论如何,是否可以使用Sass的命令导入常规CSS文件?虽然我没有使用sass的所有SCSS语法,但我仍然喜欢它的合并/压缩功能,并且希望能够在不将我的所有文件重命名为* .scss的情况下使用它 问题答案: 对于libsass(C / C ++实现),导入的工作方式与文件相同-只是省略扩展名: 这将导入。