web-dev-qa-db-fra.com

Comment utiliser SaSS pour une application ASP.NET MVC?

Problème et question

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

J'ai essayé

J'ai essayé d'utiliser une tâche Gulp 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"
  }
}

Voici 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 ma structure de projet:

Solution Explorer at Visual Studio

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

gulp sass

ReferenceError: le projet n'est pas défini

[17:50:58] ReferenceError: project is not defined
    at Gulp.<anonymous> (D:\Documenten\Howest\Semester 4\05 - Project\MarkeOnlinebis\Project Execution\MarkeOnline\gulpfile.js:9:23)
    at module.exports (D:\Documenten\Howest\Semester 4\05 - Project\MarkeOnlinebis\Project Execution\MarkeOnline\node_modules\orchestrator\lib\runTask.js:34:7)
    at Gulp.Orchestrator._runTask (D:\Documenten\Howest\Semester 4\05 - Project\MarkeOnlinebis\Project Execution\MarkeOnline\node_modules\orchestrator\index.js:273:3)
    at Gulp.Orchestrator._runStep (D:\Documenten\Howest\Semester 4\05 - Project\MarkeOnlinebis\Project Execution\MarkeOnline\node_modules\orchestrator\index.js:214:10)
    at Gulp.Orchestrator.start (D:\Documenten\Howest\Semester 4\05 - 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\05 - Project\MarkeOnlinebis\Project Execution\MarkeOnline\node_modules\node-sass\lib\index.js:291:26)
asp.net-mvcsassgulp
14
H. Pauwelyn

Essayez Web Compiler plugin à la place, c'est ce que j'utilise pour compiler SCSS dans MVC.

Une extension Visual Studio qui compile les fichiers LESS, Sass, JSX, ES6 et CoffeeScript.

11
Ryan Holmes

Vous pouvez utiliser une autre façon plus facile, je pense.

Étape 1

Suivez ces étapes dans votre gestionnaire NuGet.

  1. Ajoutez Microsoft.AspNet.Web.Optimization

  2. Ajoutez BundleTransformer.SassAndScss

  3. Ajoutez LibSassHost.Native.win-x64 Si vous utilisez le système 64 bits.

  4. LibSassHost.Native.win-x86

Étape 2

Dans BundleConfig.cs Ajoutez ce code dans la méthode RegisterBundles.

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

Ajoutez le dossier CSS dans votre projet et ajoutez la feuille de fichier main.scss À l'intérieur.

Étape 4

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

@using System.Web.Optimization

Et liez votre feuille de style

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

Étape 5

Dans Global.asax, Nous devons ajouter cette ligne dans Application_Start().

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

Ou peut-être le trouverez-vous déjà dans votre classe si vous utilisez le modèle MVC.

Et c'est votre main.scss Son travail.

10
haydar M.Al-samawe

Voici comment ajouter Sass à 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 le package bootstrap.sass (version 4 ou supérieure)
  • Faites un clic droit sur le fichier bootstrap.scss sous le dossier Content dont vous avez besoin et sélectionnez Web Compiler - Compile File
  • Le fichier bootstrap.css sera généré.
  • Vous pouvez sélectionner n'importe quel fichier scss à compiler.
  • Vous pouvez voir la configuration (liste des fichiers à compiler) dans le fichier compilerconfig.json du dossier racine.

  • Ajoutez le fichier css au bundle.

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

Si vous devez personnaliser le bootstrap, ajoutez un fichier main.scss dans le même dossier que bootstrap.scss. Compilez-le ensuite à l'aide du compilateur Web.

main.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 de n'ajouter que les fichiers dont vous avez besoin pour réduire le CSS.

0
live-love