Gulp Js＆BundleConfig.json Sass不编译@Import？

• Z时代
• 2024-01-10
• 分类：问答

我是新来的整个Grunt/Gulp设置，我试图设置一个简单的解决方案。我的JS，Html和CSS是各种各样的工作。但是我无法让SASS正确编译。这是一个使用BundleConfig.json文件的.Net核心应用程序，该文件在我的gulpfile.js中正在使用。Gulp Js＆BundleConfig.json Sass不编译@Import？

我的CSS文件结束了这样

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

没有SASS被编译，现在我卡住了。

这里是我的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 
    } 
] 

这里是我的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); 
    }); 
} 

main.scss

我无礼文件仅仅是这一点，进口到同一个目录中的Sass文件。

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

当我运行grunt任务时，我得到了这个？

预期分号或关闭大括号，发现“ - ”预期
分号或关闭大括号，发现“ - ”预期分号或
闭大括号，实测“ - ”的意外标记，发现'@import'
意外的令牌，发现 ' “_variables.scss”' 意外令牌，发现
'@import' 意外令牌，发现 ' “base.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);  
});

以上是 Gulp Js＆BundleConfig.json Sass不编译@Import？ 的全部内容， 来源链接： utcz.com/qa/261394.html