标签: gulp-sass

我刚刚开始使用gulp-sass,有没有"简单"的方法来找出正在使用的Sass版本？

不是我认为这太重要了,而是我在Visual Studio 2015(CTP6)中使用gulp -sass.

我需要知道,因为我想使用Sass mixin,它需要一定的Sass最低版本.

目前,如果我想找出正在使用的Sass版本,我尝试按照这样的方式跟踪,gulp-sass是node-sass的包装器,它反过来为libsass提供Node绑定,这是Sass的C编译器.

因此,为了找到在我的环境中使用的Sass版本,我必须遵循链并尝试确定每个步骤中使用的版本以及它随后用于下一步的版本.

当然必须有一个更简单的方法吗？

只是想知道是否有人可以帮助我设置我的Gulp.目前我正在使用gulp-sass和gulp-scss-lint进行监视任务.我想要发生的是,当保存scss文件以使linting任务完全运行时,如果为scss文件抛出任何错误或警告而不进行编译并使watch继续运行.

目前我似乎有这个错误,但没有警告,仍然编译样式表.

/// <binding ProjectOpened='serve' />
//  Macmillan Volunteering Village Gulp file.
//  This is used to automate the minification
//  of stylesheets and javascript files. Run using either
//  'gulp', 'gulp watch' or 'gulp serve' from a command line terminal.
//
//  Contents
//  --------
//    1. Includes and Requirements
//    2. SASS Automation
//    3. Live Serve
//    4. Watch Tasks
//    5. Build Task

'use strict';

//
//  1. Includes and Requirements
//  ----------------------------
//  Set the …

当我在我的.scss文件中使用以下代码时

@import url('//fonts.googleapis.com/css?family=SomeFont:400,700,400italic');

我使用的SASS解析器(nodejs gulp-sass)愉快地从所述位置下载文件,并将其作为纯文本包含在编译输出中.

这是我的Gulpfile:

var gulp = require('gulp'),
    sourcemaps = require('gulp-sourcemaps'),
    autoprefixer = require('gulp-autoprefixer'),
    minify = require('gulp-minify-css'),
    rename = require('gulp-rename'),
    sass = require('gulp-sass'),
    uglify = require('gulp-uglify'),
    plumber = require('gulp-plumber');

gulp.task('sass', function() {
    gulp.src('www/sass/*.scss')
        .pipe(plumber(function(err){
            console.log(err);
            this.emit('end');
        }))
        .pipe(sourcemaps.init())
            .pipe(sass({
                outputStyle: 'expanded',
                errLogToConsole: true,
            }))
            .pipe(autoprefixer('last 2 version'))
            .pipe(rename({suffix: '.min' }))
            .pipe(minify())
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('www/css'));
});

问题是,我的网站使用HTTPS,并且当编译器请求文件时,它使用提取文件HTTP,因此返回的响应中的URL也HTTP导致加载控制台的警告,而字体不会加载.

有什么方法可以让编译器单独留下那一行吗？

我想gulp监视我的工作文件夹上的所有更改,但只生成一个文件.因为我使用scss哪个导入所有必需的文件,所以不需要编译所有.css文件,只需要编译主文件.

现在,我gulpfile.js包含:

var gulp    = require('gulp');
var util    = require('gulp-util');
var sass    = require('gulp-sass');

gulp.task('sass', function () {
  return gulp.src('./sass/style.scss')
  .pipe(sass().on('error', sass.logError))
  .pipe(gulp.dest('./dist/css'));
});

gulp.task('watch', function() {
  gulp.watch('./sass/**/*.scss', ['sass']);
});

而且我必须把./sass/style.scss它保存到triger gulp watch.

我想要gulp观看所有文件(类似的东西./**/*.scss),但只渲染一个 - ./sass/style.scss.怎么实现呢？

我使用以下内容gulp从SASS(*.scss)文件构建一个CSS文件:

var gulp        = require('gulp')
  , sass        = require('gulp-sass');

var colortheme = 'blue';

gulp.task('build_css', function() {
  return gulp.src(['resources/assets/sass/app/' + colortheme + '.scss'])
             .pipe(sass())
             .pipe(gulp.dest('public/css/'));
} );

如您所见,我为每个colortheme使用不同的.scss文件.

我想只使用一个.scss文件,但能够以某种方式将colortheme作为参数传递,因此这可以用作.scss文件中的变量.

这可能吗？

我的gulpfile出了问题,无法弄清楚出了什么问题.

问题:autoprefixer无法按预期工作,并且并不总是按预期正确输出.css和.min.css文件.

var gulp = require('gulp');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
var prefix = require('gulp-autoprefixer');
var minify = require('gulp-minify-css');
var rename = require('gulp-rename');

var config = {
    sassMain: 'style/Main.scss',
    sassFiles: 'style/**/*.scss',
    cssfiles: ['style/Main.css'],
    dest: 'style',
    autoprefixerOptions: {
    browsers: ['last 2 versions', '> 5%']
    }
};

gulp.task('compile-sass', function () {
    return gulp.src(config.sassMain)
        .pipe(sourcemaps.init())
        .pipe(sass().on('error', sass.logError))
        .pipe(prefix(config.autoprefixerOptions.browsers))
        .pipe(sourcemaps.write())
        .pipe(gulp.dest(config.dest))
        .pipe(rename({ extname: '.min.css' }))
        .pipe(minify())
        .pipe(sourcemaps.write())
        .pipe(gulp.dest(config.dest))
});

gulp.task('default', function () {
    gulp.watch(config.sassFiles, ['compile-sass']);
});

有任何想法吗？

所以我在下面有我的构建脚本,一切都运行得很好,除非我保存的文件不是我的app.scss文件,而是导入到该文件中的sass任务,该任务不会运行.所以我的大口观察正在观看,但不是我猜的所有文件.不知道如何解决这个问题.我以为我指定使用"/*.scss"观看所有文件

我会喜欢这方面的帮助.

谢谢!

gulpfile.js

// Include gulp
var gulp = require('gulp');

// Include Our Plugins
var jshint = require('gulp-jshint');
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var browserSync = require('browser-sync');

var reload = browserSync.reload;

var sassOptions = {
    errLogToConsole: true,
    outputStyle: 'compressed',
    includePaths: ['bower_components/foundation-sites/scss', 'bower_components/motion-ui/src']
};

// Set the proxy.
gulp.task('browser-sync', function () {
    browserSync({
        proxy: "localhost:8000/wozencraftinsurance.dev/"
    });
});


// Lint Task
gulp.task('lint', function() {
    return gulp.src('js/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default')); …

这也正在咬我的项目,它使用gulp-sass.gulp-sass依赖于node-sass#^ 3.4.1,它只是自动更新到3.5.3,这是一个破坏版本.

我已经通过更新package.json文件将我的gulp sass版本降级到较旧版本(2.1.0),但它仍在破坏.

如何回到节点sass 3.4.2？

错误信息

错误:您可能无法从@media中扩展外部选择器.您只能在同一指令中@extend选择器.

{
  "version": "1.0.0",
  "name": "abcd",
  "devDependencies": {
     "bower": "^1.3.12",
    "express": "^4.12.3",
    "gulp": "^3.8.10",
    "gulp-autoprefixer": "^2.1.0",
    "gulp-bower": "^0.0.7",
    "gulp-concat": "^2.5.2",
    "gulp-install": "^0.4.0",
    "gulp-livereload": "^3.8.0",
    "gulp-minify-css": "^1.0.0",
    "gulp-plumber": "^1.0.0",
    "gulp-sass": "2.1.0",
    "gulp-sourcemaps": "^1.5.1",
    "gulp-uglify": "^1.1.0"
  },
  "dependencies": {
    "jquery": "1.11.1"
  }
}

我在 VS2017 中有一个基本的 gulp 设置来缩小我的 Javascript。我决定添加 gulp-sass （我的 package.json 说我在 gulp-sass v4.0.1 上）但它抛出了这个错误：

C:\Work\MyProject\MyProject\node_modules\gulp-sass\index.js:66
    let sassMap;
    ^^^
SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode
    at exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:373:25)
    at Object.Module._extensions..js (module.js:404:10)
    at Module.load (module.js:343:32)
    at Function.Module._load (module.js:300:12)
    at Module.require (module.js:353:17)
    at require (internal/module.js:12:17)
    at Object.<anonymous> (C:\Work\MyProject\MyProject\gulpfile.js:11:12)
    at Module._compile (module.js:397:26)
    at Object.Module._extensions..js (module.js:404:10)

我的 gulpfile 看起来像这样：

var gulp = require('gulp');
var concat = require('gulp-concat');
var rename = require('gulp-rename');
var watch = require('gulp-watch');
var …

我想include在同一个 SCSS 中使用多个。例如：

.section-ptb {
    padding-top: 130px;
    padding-bottom: 130px;
    @include desktop {
        padding-top: 80px;
        padding-bottom: 80px;
    }
    @include tablet {
        padding-top: 80px;
        padding-bottom: 80px;
    }
    @include mobole {
        padding-top: 80px;
        padding-bottom: 80px;
    }
}

经常使用多个@include 很无聊。有任何方法可以减少代码，我想使用：

.section-ptb {
    padding-top: 130px;
    padding-bottom: 130px;
    @include desktop , @include tablet, @include mobole {
        padding-top: 80px;
        padding-bottom: 80px;
    }
}

但它不是有效的 SCSS。请告诉我另一种减少代码的方法。