Comment utiliser SaSS pour un ASP.NET application MVC?

Problème et de la question

J'ai toujours eu des problèmes avec le code CSS, alors maintenant, j'ai toujours utiliser SaSS code. Mais ma question est: comment puis-je utiliser SaSS pour un ASP.NET application MVC?

Comment utiliser SaSS pour un ASP.NET application MVC?

J'ai essayé

J'ai essayé essayé d'utiliser une Gorgée tâche pour cela. J'ai utilisé ces commandes

npm init
npm install --save gulp
npm install --save gulp-sass

Voici mon package.json fichier:

{
  "name": "markeonline",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Hein Pauwelyn",
  "license": "ISC",
  "dependencies": {
    "gulp": "^3.9.1",
    "gulp-sass": "^3.1.0"
  }
}

Ici est la gulpfile.js

var gulp = require("gulp"),
    sass = require("gulp-sass");

//other content removed

gulp.task("sass", function () {
    return gulp.src('./**/*.scss')
      .pipe(sass())
      .pipe(gulp.dest(project.webroot + './MarkeOnline.Website/Content/css'));
});

Voici mon projet structure:

Comment utiliser SaSS pour un ASP.NET application MVC?

Ce code me donne l'erreur suivante si j'utilise la commande ci-dessous:

gulp sass

ReferenceError: projet n'est pas défini

[17:50:58] ReferenceError: project is not defined
    at Gulp.<anonymous> (D:\Documenten\Howest\Semester 4 - Project\MarkeOnlinebis\Project Execution\MarkeOnline\gulpfile.js:9:23)
    at module.exports (D:\Documenten\Howest\Semester 4 - Project\MarkeOnlinebis\Project Execution\MarkeOnline\node_modules\orchestrator\lib\runTask.js:34:7)
    at Gulp.Orchestrator._runTask (D:\Documenten\Howest\Semester 4 - Project\MarkeOnlinebis\Project Execution\MarkeOnline\node_modules\orchestrator\index.js:273:3)
    at Gulp.Orchestrator._runStep (D:\Documenten\Howest\Semester 4 - Project\MarkeOnlinebis\Project Execution\MarkeOnline\node_modules\orchestrator\index.js:214:10)
    at Gulp.Orchestrator.start (D:\Documenten\Howest\Semester 4 - Project\MarkeOnlinebis\Project Execution\MarkeOnline\node_modules\orchestrator\index.js:134:8)
    at C:\Users\hein_\AppData\Roaming\npm\node_modules\gulp\bin\gulp.js:129:20
    at _combinedTickCallback (internal/process/next_tick.js:67:7)
    at process._tickCallback (internal/process/next_tick.js:98:9)
    at Module.runMain (module.js:592:11)
    at run (bootstrap_node.js:394:7)

events.js:160
      throw er; //Unhandled 'error' event
      ^
Error: node_modules\node-sass\test\fixtures\depth-first\_vars.scss
Error: Undefined variable: "$import-counter".
        on line 1 of node_modules/node-sass/test/fixtures/depth-first/_vars.scss
>> $import_counter: $import_counter + 1;
   -----------------^

    at options.error (D:\Documenten\Howest\Semester 4 - Project\MarkeOnlinebis\Project Execution\MarkeOnline\node_modules\node-sass\lib\index.js:291:26)
InformationsquelleAutor H. Pauwelyn | 2017-02-13
  1. 12

    Essayer Web Compilateur plugin au lieu de cela est ce que j'utilise pour compiler SCSS en MVC.

    Une extension de Visual Studio qui compile less, Sass, JSX, ES6 et CoffeeScript fichiers.

    InformationsquelleAutor Ryan Holmes
  2. 11

    Vous pouvez utiliser un autre moyen plus facile je pense.

    Étape 1

    Aller avec ces étapes
    dans votre NuGet Manager.

    1. Ajouter Microsoft.AspNet.Web.Optimization

    2. Ajouter BundleTransformer.SassAndScss

    3. Ajouter LibSassHost.Native.win-x64 si vous utilisez le système 64 bits.

    4. LibSassHost.Native.win-x86

    Etape 2

    Dans BundleConfig.cs ajouter ce code dans RegisterBundles methode.

    var nullBulider = new NullBuilder();
var nullOrderer = new NullOrderer();

BundleResolver.Current = new CustomBundleResolver();
var commonStyleBundle = new CustomStyleBundle("~/Bundle/sass");

commonStyleBundle.Include("~/css/main.scss");
commonStyleBundle.Orderer = nullOrderer;
bundles.Add(commonStyleBundle);

    Étape 3

    Ajouter CSS dossier de votre projet et ajoutez main.scss feuille de fichier à l'intérieur.

    Étape 4

    À votre avis, vous devez utiliser System.Web.Optimization.

    @using System.Web.Optimization

    Et le lien de votre feuille de style 

    @Styles.Render("~/Bundle/sass").

    Étape 5

    Dans Global.asax nous avons besoin d'ajouter cette ligne dans Application_Start().

    RouteConfig.RegisterRoutes(RouteTable.Routes);
BundleConfig.RegisterBundles(BundleTable.Bundles);

    Ou peut-être que vous trouverez qu'il est déjà dans votre classe si vous utilisez MVC gabarit.

    Et qu'en est-il de votre main.scss son travail.

    • Cela fonctionne, mais je suis préoccupé par la façon dont il met un chargement de la dll dans le dossier \bin pour l'atteindre.
    InformationsquelleAutor haydar M.Al-samawe
  3. 0

    C'est comment vous pouvez ajouter le Sass pour votre application Mvc:

    • Télécharger WebCompiler:
      https://marketplace.visualstudio.com/items?itemName=MadsKristensen.WebCompiler&ssr=false#qna
    • Double-cliquez sur le fichier Vsix pour l'installer.
    • Clic droit sur la solution, Gérer les Packages Nuget
    • Télécharger bootstrap.sass package (version 4 ou supérieure)
    • Clic droit sur le fichier d'amorçage.scss fichier sous dossier de Contenu dont vous avez besoin et sélectionnez Web Compilateur Compiler le Fichier
    • Le bootstrap.css fichier sera généré.
    • Vous pouvez sélectionner n'importe quel fichier scss pour compiler.
    • Vous pouvez voir la configuration (liste des fichiers à compiler) dans le compilerconfig.fichier json dans le dossier racine.

    • Ajouter le fichier css du bundle.

      bundles.Add(new StyleBundle("~/Content/css").Include(
          "~/Content/bootstrap/main.css",
          "~/Content/site.css"));

    Si vous avez besoin de personnaliser bootstrap, ajouter un principal.scss fichier dans le même dossier que bootstrap.scss. Puis le compiler à l'aide de Web Compilateur.

    principal.scss:

    /* import the necessary Bootstrap files */
@import "_functions.scss";
@import "_variables.scss";

/* make changes to the !default Bootstrap variables */
$body-color: green;

/* finally, import Bootstrap to set the changes! */
@import "bootstrap.scss";

    Cet exemple inclut tous les fichiers, mais assurez-vous d'ajouter les fichiers dont vous avez besoin pour faire le css plus petits.

    InformationsquelleAutor live-love