Aspnetcore: LESS or SCSS supported?

Created on 2 May 2018 · 7Comments · Source: dotnet/aspnetcore

area-blazor

Source

hungdluit

Most helpful comment

Hi @hungdluit ,

As SteveSandersonMS mentions it is already supported. I have just set it up.
This is a very clean and simple approach I think - no need of gulp or webpack.

Follow the steps below:

Install Web Compiler:

In Visual Studio, press Tools -> Extensions and updates.
Install Web Compiler - it's created by Mads Kristensen.

Compile the files

Right-click the .scss-file in Solution Explorer to setup compilation.
Press Web Compiler -> Compile File.

You can even have the .scss files in a structure next to the relevant component and then compile it to wwwroot simply by modifying the compilerconfig.json file. This file will be generated when compiling the .scss file.

To integrate this into the MSBuild process, yet again right click the generated compilerconfig.json file and press Web Compiler -> Enable compile on build.

Hope this helps you :)

Best regards,
Jeppe

Diemauerdk on 24 May 2018

👍10 ❤3

All 7 comments

You can update your csproj to put in whatever build process you want, for example to transform .scss files to .css files in your wwwroot directory. So yes, it's already supported if you add the relevant MSBuild config, though I appreciate that may seem a bit advanced.

Eventually we will probably up something along these lines by default in the project templates, which is already tracked by aspnet/AspNetCore#5459, so I'll close in favour of that.

SteveSandersonMS on 2 May 2018

Thanks for reply, and sorry for my bad if you can show me the lines to config that. It would be great (for me)

hungdluit on 3 May 2018

Alternative could be use standard gulp which is also well supported by VS. You can easy bind task to some action like "ProjectOpened, BeforeBuild" etc..

Add project.config

{
    "version": "1.0.0",
    "name": "test",
    "private": true,
    "devDependencies": {
        "gulp": "~3.9.1",
        "gulp-autoprefixer": "^5.0.0",
        "gulp-clean": "~0.4.0",
        "gulp-clean-css": "~3.9.3",
        "gulp-concat": "~2.6.1",
        "gulp-sass": "^4.0.1",
        "gulp-uglify": "~3.0.0",
        "gulp-util": "~3.0.8",
        "gulp-watch": "~5.0.0"
    }
}

Add gulpfile.js

/// <binding ProjectOpened='watchSass' />
"use strict";

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

var gutil = require("gulp-util");
var cleanCSS = require("gulp-clean-css");
var concat = require("gulp-concat");
var autoprefixer = require("gulp-autoprefixer");
var uglify = require("gulp-uglify");
var clean = require("gulp-clean");
var path = require('path');

var node_modules = path.resolve(__dirname, 'node_modules');

var projectPath = "./";
var wwwRootPath = "./wwwroot";

gulp.task("default", ["watchSass"]);

// Watch call task 'sass'
gulp.task("watchSass", function () {
    gulp.watch([projectPath + "**/*.scss"], { interval: 900 }, ["sass"]);
});

// Compile all sass to one file with vendor prefix and minify
gulp.task("sass", function () {
    gulp.src(
    [
        projectPath + "Shared/**/*.scss",
        projectPath + "Shared/*.scss",
        projectPath + "Components/**/*.scss",
        projectPath + "Pages/**/*.scss",
    ])
    .pipe(sass())
    .pipe(concat("style.css"))
    .pipe(autoprefixer("last 2 version", "ie11", "safari 10"))
    .pipe(cleanCSS({ compatibility: "ie11", keepSpecialComments: "0" }))
    .pipe(gulp.dest(wwwRootPath + "/css"));
});

Idea is keep your style with Component code like this. Of course you can do it other way.

/Components
    /Button
        Button.cshtml
        Button.scss     
        Button.Themes.scss  <-- THere you can keep theme / style variant of button 
/Shared
    /Layout
        MainLayout.cshtml
        MainLayout.scss
    StyleConastats.scss     <-- Import in other if you need use some "global" value like primary color

If you have problem with VS build-in node.js version here is the solution.

jirisykora83 on 3 May 2018

👍3

Thanks @jirisykora83 ,
I think something likes https://github.com/dotless/dotless/blob/master/samples/dotless.SampleWeb/Views/Shared/_master.cshtml
should be more handy