2017-02-03 2 views
2

Я создал новый проект ядра dotnet, используя yoman в osx. Итак, у него не было package.json и gulpfile.js. Я добавил их вручнуюКак сгенерировать css-файл из scss-файла dotnet core

меня удалить Main.css & main.min.css файл ./wwwroot/css, потому что я пишу все мои стили в СКС, так что будет автоматически генерировать .css файлы

Но в этом случае ничего не происходит. Нет .css не получить сгенерированный & SCSS стилей не работает

Когда построить мой проект & запустить его с dotnet run команды после того, как не редактирование SASS файл ничего не происходит. Нет файла 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" 
    } 
} 

после изменения "PreCompile": [ "Глоток дерзость"]

$ 

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) 

ответ

3

Пожалуйста, попробуйте следующие 2 идеи:

  1. Добавить " прекомпилировать "сценарий раздел вашего project.json файла, который ссылается на глоток Sass задачи:

    "precompile": ["gulp sass"] 
    
  2. Изменить ваш глоток дерзости задачи следующего:

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

Задача в настоящее время ссылается на переменном с именем проектом , которого нет.

Кроме того, чтобы зафиксировать предупреждение о несоответствии глотка версии, выполните следующую команду из командной оболочки из каталога, в котором файл package.json живет: npm i -D [email protected]

В качестве альтернативы, вы можете просто изменить версию 3.8.11 номер для gulp в вашем файле package.json до 3.9.1.

Смежные вопросы