Gulp Js & BundleConfig.json Sass Not Compiling @Import?

Question

I am new to this whole Grunt/Gulp setup, and I'm trying to set up a simple solution. My JS, Html and CSS is working of sorts. But I cannot get the SASS to compile correctly. It's a .Net core application using the BundleConfig.json file which is being used in my gulpfile.js.

My CSS file ends up like this

@import"_variables.scss";@import"base.scss";

Without the SASS being compiled and I'm stuck now.

Here is my bundleconfig.json

[
  {
    "outputFileName": "wwwroot/css/sass.min.css",
    "inputFiles": [
      "sass/main.scss"
    ]
  },
  {
    "outputFileName": "wwwroot/css/all.min.css",
    "inputFiles": [
      "node_modules/bootstrap/dist/css/bootstrap.min.css",
      "node_modules/bootstrap/dist/css/bootstrap-grid.min.css",
      "wwwroot/css/sass.min.css"
    ]
  },
  {
    "outputFileName": "wwwroot/js/all.min.js",
    "inputFiles": [
      "node_modules/jquery/dist/jquery.min.js",
      "node_modules/jquery-validation/dist/jquery.validate.min.js",
      "node_modules/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js",
      "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js",
      "scripts/**/*.js"
    ],
    "minify": {
      "enabled": true,
      "renameLocals": true
    },
    "sourceMap": false
  }
]

And here is my gulpfile.js

"use strict";

var gulp = require("gulp"),
    scsscompile = require("gulp-sass"),
    concat = require("gulp-concat"),
    cssmin = require("gulp-cssmin"),
    htmlmin = require("gulp-htmlmin"),
    uglify = require("gulp-uglify"),
    merge = require("merge-stream"),
    del = require("del"),
    bundleconfig = require("./bundleconfig.json");

var regex = {
    scss: /\.scss$/,
    css: /\.css$/,
    html: /\.(html|htm)$/,
    js: /\.js$/
};

gulp.task("min", ["min:js", "min:scss", "min:css", "min:html"]);

gulp.task("min:js", function () {
    var tasks = getBundles(regex.js).map(function (bundle) {
        return gulp.src(bundle.inputFiles, { base: "." })
            .pipe(concat(bundle.outputFileName))
            .pipe(uglify())
            .pipe(gulp.dest("."));
    });
    return merge(tasks);
});

gulp.task("min:scss", function () {
    var tasks = getBundles(regex.scss).map(function (bundle) {
        return gulp.src(bundle.inputFiles, { base: "." })
            .pipe(concat(bundle.outputFileName))
            .pipe(scsscompile({ includePaths: ['./sass'] }))
            .pipe(gulp.dest("."));
    });
    return merge(tasks);
});

gulp.task("min:css", function () {
    var cssTasks = getBundles(regex.css).map(function (bundle) {
        return gulp.src(bundle.inputFiles, { base: "." })
            .pipe(concat(bundle.outputFileName))
            .pipe(cssmin())
            .pipe(gulp.dest("."));
    });
    return merge(cssTasks);
});

gulp.task("min:html", function () {
    var tasks = getBundles(regex.html).map(function (bundle) {
        return gulp.src(bundle.inputFiles, { base: "." })
            .pipe(concat(bundle.outputFileName))
            .pipe(htmlmin({ collapseWhitespace: true, minifyCSS: true, minifyJS: true }))
            .pipe(gulp.dest("."));
    });
    return merge(tasks);
});

gulp.task("clean", function () {
    var files = bundleconfig.map(function (bundle) {
        return bundle.outputFileName;
    });

    return del(files);
});

gulp.task("watch", function () {
    getBundles(regex.js).forEach(function (bundle) {
        gulp.watch(bundle.inputFiles, ["min:js"]);
    });

    getBundles(regex.scss).forEach(function (bundle) {
        gulp.watch(bundle.inputFiles, ["min:scss"]);
    });

    getBundles(regex.css).forEach(function (bundle) {
        gulp.watch(bundle.inputFiles, ["min:css"]);
    });

    getBundles(regex.html).forEach(function (bundle) {
        gulp.watch(bundle.inputFiles, ["min:html"]);
    });
});

function getBundles(regexPattern) {
    return bundleconfig.filter(function (bundle) {
        return regexPattern.test(bundle.outputFileName);
    });
}

My Sass file which I am trying to compile main.scss is just this, imports to Sass files in the same directory.

@import "_variables.scss";
@import "base.scss";

When I run the grunt task, I get this?

Expected semicolon or closing curly-brace, found '-' Expected
semicolon or closing curly-brace, found '-' Expected semicolon or
closing curly-brace, found '-' Unexpected token, found '@import'
Unexpected token, found '"_variables.scss"' Unexpected token, found
'@import' Unexpected token, found '"base.scss"'

Any help would be appreciated.

Answer 1

getBundles()功能正在regex.scss中寻找outputFilename模式。在bundleconfig.json中，输出文件名以.css或.js扩展名结尾。

您需要将min:scss任务更改为以下内容：

gulp.task("sass", function () {
    var tasks = gulp.src('./sass/main.scss')
                    .pipe(sass().on('error', sass.logError))
                    .pipe(gulp.dest('./wwwroot/css'));
    return merge(tasks);
});

我所做的是 - 我明确表示要在main.scss文件夹中查找sass文件。您可以编写一个glob模式，查找sass文件夹中的所有scss。如果您想严格遵守bundleconfig.json - 那么您需要编写一个新的getbundles()函数，该函数会查找具有.scss扩展名的输入文件并将其返回。

希望这有帮助。

Answer 2

这个问题已经存在了一段时间，但是我和SO有同样的问题。

我能够通过将a解析为包含.SCSS文件的包来解决此问题。

创建一个将在inputFiles而非outputFileName中出现的新方法

const getBundlesByInputs = (regexPattern) => {
    return bundleconfig.filter(bundle => {
        return regexPattern.test(bundle.inputFiles);
    });
};

然后，您可以简单地修改min：scss任务，使其使用新的getBundlesByInput方法：

gulp.task("min:scss", async function () {
    merge(getBundlesByInputs(regex.scss).map(bundle => {
        return gulp.src(bundle.inputFiles, { base: '.' })
            .pipe(concat(bundle.outputFileName))
            .pipe(scsscompile({ includePaths: ['./sass'] }))
            .pipe(gulp.dest('.'));
    }))
});