Abhimanyu Aryan Abhimanyu Aryan - 4 years ago 324
Sass (Sass) Question

how to generate css file from scss file dotnet core

I have created a new dotnet core project using yeoman in osx. So, It didn't have package.json and gulpfile.js. I've added them manually

I have delete main.css & main.min.css file ./wwwroot/css because I'm writing all my styles in scss so it would automatically generate .css files

But, in this case nothing happens. No .css get generated & scss styles doesn't works

When build my project & run it with

dotnet run
command after editing sass file nothing happens. No css file gets generated

./wwwroot/styles/scss/main2.scss

$base: #CC0000;
body {
background-color: $base;
}


package.json

{
"devDependencies": {
"gulp": "3.8.11",
"gulp-concat": "2.5.2",
"gulp-cssmin": "0.1.7",
"gulp-uglify": "1.2.0",
"rimraf": "2.2.8",
"gulp-sass": "1.3.3"
}
}


gulpfile.js

/// <binding Clean='clean' />
"use strict";

var gulp = require("gulp"),
rimraf = require("rimraf"),
concat = require("gulp-concat"),
cssmin = require("gulp-cssmin"),
uglify = require("gulp-uglify"),
sass = require("gulp-sass");

var paths = {
webroot: "./wwwroot/"
};

paths.js = paths.webroot + "js/*.js";
paths.minJs = paths.webroot + "js/*.min.js";
paths.css = paths.webroot + "css/*.css";
paths.minCss = paths.webroot + "css/*.min.css";
paths.concatJsDest = paths.webroot + "js/site.min.js";
paths.concatCssDest = paths.webroot + "css/site.min.css";

gulp.task("sass", function() {
return gulp.src("./wwwroot/styles/scss/main2.scss")
.pipe(sass())
.pipe(gulp.dest(project.webroot + '/css'));
});

gulp.task("clean:js", function(cb) {
rimraf(paths.concatJsDest, cb);
});

gulp.task("clean:css", function(cb) {
rimraf(paths.concatCssDest, cb);
});

gulp.task("clean", ["clean:js", "clean:css"]);

gulp.task("min:js", function() {
return gulp.src([paths.js, "!" + paths.minJs], { base: "." })
.pipe(concat(paths.concatJsDest))
.pipe(uglify())
.pipe(gulp.dest("."));
});

gulp.task("min:css", function() {
return gulp.src([paths.css, "!" + paths.minCss])
.pipe(concat(paths.concatCssDest))
.pipe(cssmin())
.pipe(gulp.dest("."));
});

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


project.json

{
"dependencies": {
"Microsoft.NETCore.App": {
"version": "1.1.0",
"type": "platform"
},
"Microsoft.AspNetCore.Diagnostics": "1.1.0",
"Microsoft.AspNetCore.Mvc": "1.1.0",
"Microsoft.AspNetCore.Razor.Tools": {
"version": "1.1.0-preview4-final",
"type": "build"
},
"Microsoft.AspNetCore.Routing": "1.1.0",
"Microsoft.AspNetCore.Server.IISIntegration": "1.1.0",
"Microsoft.AspNetCore.Server.Kestrel": "1.1.0",
"Microsoft.AspNetCore.StaticFiles": "1.1.0",
"Microsoft.Extensions.Configuration.EnvironmentVariables": "1.1.0",
"Microsoft.Extensions.Configuration.Json": "1.1.0",
"Microsoft.Extensions.Configuration.CommandLine": "1.1.0",
"Microsoft.Extensions.Logging": "1.1.0",
"Microsoft.Extensions.Logging.Console": "1.1.0",
"Microsoft.Extensions.Logging.Debug": "1.1.0",
"Microsoft.Extensions.Options.ConfigurationExtensions": "1.1.0",
"Microsoft.VisualStudio.Web.BrowserLink.Loader": "14.1.0"
},

"tools": {
"BundlerMinifier.Core": "2.2.306",
"Microsoft.AspNetCore.Razor.Tools": "1.1.0-preview4-final",
"Microsoft.AspNetCore.Server.IISIntegration.Tools": "1.1.0-preview4-final"
},

"frameworks": {
"netcoreapp1.1": {
"imports": [
"dotnet5.6",
"portable-net45+win8"
]
}
},

"buildOptions": {
"emitEntryPoint": true,
"preserveCompilationContext": true
},

"runtimeOptions": {
"configProperties": {
"System.GC.Server": true
}
},

"publishOptions": {
"include": [
"wwwroot",
"**/*.cshtml",
"appsettings.json",
"web.config"
]
},

"scripts": {
"precompile": ["dotnet bundle"],
"prepublish": [
"npm install",
"bowser install",
"gulp clean",
"gulp min"
],
"postpublish": ["dotnet publish-iis --publish-folder %publish:OutputPath% --framework %publish:FullTargetFramework%"],
"prebuild": "gulp sass",
"postbuild": "echo after building",
"prepack": "echo before packing",
"postpack": "echo after packing",
"prerestore": "echo before restoring packages",
"postrestore": "echo after restoring packages"
},

"tooling": {
"defaultNamespace": "Sample"
}
}


after changing "precompile": ["gulp sass"]

$

dotnet run
Project Sample (.NETCoreApp,Version=v1.1) will be compiled because project is not safe for incremental compilation. U
se --build-profile flag for more information.
Compiling Sample for .NETCoreApp,Version=v1.1
[08:50:23] Warning: gulp version mismatch:
[08:50:23] Global gulp is 3.9.1
[08:50:23] Local gulp is 3.8.11
[08:50:23] Using gulpfile ~/Unity3D/DotNetCore/Sample/gulpfile.js
[08:50:23] Starting 'sass'...
[08:50:23] Finished 'sass' after 19 ms

Compilation succeeded.
0 Warning(s)
0 Error(s)

Answer Source

Please try the following 2 ideas:

  1. Add a "precompile" script to the scripts section of your project.json file which invokes the gulp sass task:

    "precompile": ["gulp sass"]
    
  2. Change your gulp sass task to the following:

    gulp.task("sass", function() {
         return gulp.src("./wwwroot/styles/scss/main2.scss")
             .pipe(sass())
             .pipe(gulp.dest(paths.webroot + '/css'));
    });
    

The task currently references a variable named project, which doesn't exist.

Also, to fix the gulp version mismatch warning, run the following from a command shell from the directory in which your package.json file lives: npm i -D gulp@3.9.1

Alternatively, you could just change the 3.8.11 version number for gulp in your package.json file to 3.9.1.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download