sass - 如何从 scss 文件生成 css 文件 dotnet core

Question

我在 osx 中使用 yeoman 创建了一个新的 dotnet 核心项目。所以，它没有 package.json 和 gulpfile.js。我已经手动添加了它们

我已经删除了 main.css 和 main.min.css 文件 ./wwwroot/css 因为我在 scss 中编写了我所有的样式所以它会自动生成 .css 文件

但是，在这种情况下什么也没有发生。没有生成 .css 并且 scss 样式不起作用

当构建我的项目并在编辑 sass 文件后使用 dotnet run 命令运行它时，没有任何反应。没有生成 css 文件

./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"
    }
}

更改“预编译”后:[“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 1

请尝试以下 2 个想法:

1. 将“预编译”脚本添加到 project.json 文件的 scripts 部分，它会调用 gulp sass 任务:

   "precompile": ["gulp sass"]
   

2. 将您的 gulp sass 任务更改为以下内容:

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

任务当前引用了一个名为 project 的变量，该变量不存在。

此外，要修复 gulp 版本不匹配警告，请从 package.json 文件所在目录的命令 shell 运行以下命令: npm i -D gulp@3.9.1

或者，您可以将 package.json 文件中 gulp 的 3.8.11 版本号更改为 3.9.1。