Base solution for your next web application
Open Closed

Compilation of LESS/Sass #6463


User avatar
0
XugoWebTeam created

Hello

Can anyone point me to any documents/resources on the how the compiling for LESS/Sass works? There doenst seem to be much info in the Docs.

It doesn’t seem to work as expected: many of the LESS files do not compile at all, although it appears that they are being ‘watched’, because whenever I save a file it always triggers a compile.

Things I have not figured out yet:

  1. Is the Metronic Sass files supposed to compile (into style.bundle.css?) upon save?

  2. The files listed in the compilerconfig.json do are not compiling at all. For example: { "outputFile": "src/assets/primeng/datatable/css/primeng.datatable.css", "inputFile" : "src/assets/primeng/datatable/css/primeng.datatable.less" },

  3. The LESS files that are related to a specific component, and that get injected into the page as a <style> tag DO however work, and compile correctly.

  4. The angular-cli.json nor the angular.json don't seem to do anything.

Thanks


8 Answer(s)
  • User Avatar
    0
    maliming created
    Support Team

    There are documents here: https://docs.aspnetzero.com/documents/zero/latest/Development-Guide-Core#bundling-minifying-and-compiling

  • User Avatar
    0
    XugoWebTeam created

    HI @maliming thanks for the link. I had seen that page. With regards to Gulp - our project is not using it. I'm wondering if we need to be. But I think webpack is in there also (so perhpas both are not needed?) theres only a brief mention of Gulp in the docs, and no example gulpfile.js is provided.

  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi @xugowebteam

    LESS to CSS is handled by WebCompiler Visual Studio extension for now. We have replaced it with a gulp task but it will be available for v6.7 of AspNet Zero.

    Metronic files are not compiled but bundled in AspNet Zero for ASP.NET Core & jQuery version.

  • User Avatar
    0
    XugoWebTeam created

    Hi ismcagdas

    I am wanting to use VS Code on a Mac.
    some of the LESS files are in fact compiling (using VS Code on Mac). These seem to be the ones that end up getting injected into the page using a <style> tag.

    The ones that are not working seem to be the LESS files listed in our compilerconfig.json. So is this issue caused by the fact that I am not using the WebCompiler on Visual Studio (on Windows) ?

    What are my options if I want to work on a Mac?

  • User Avatar
    0
    ismcagdas created
    Support Team

    You can create a similar task like this one https://github.com/aspnetzero/aspnet-zero-core/blob/dev/aspnet-core/src/MyCompanyName.AbpZeroTemplate.Web.Mvc/gulpfile.js#L44 to compile all less files to css under wwwroot folder using gulp.

    It will be released with v6.7 but you can copy and use it on your project.

  • User Avatar
    0
    XugoWebTeam created

    ismcagdas - that link isn't working. can you confirm the correct one, as I'd be intersted to see that gulpfile. Cheers Jared

  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi,

    You can add your GitHub user on https://aspnetzero.com/LicenseManagement. After adding your user, you can see the link above.

  • User Avatar
    0
    kasem created

    Hi,

    I've been waiting a response on a similar ticket https://support.aspnetzero.com/QA/Questions/6603

    Can you please describe the steps you are following to update and compile SASS files to generate CSS files including RTL in AspNetZero Angular version. For now I get a new build on every update for any SASS file without reflecting the change on the CSS files themselves.

    Your answer above refers to MVC version and compilation of SASS using Visual studio extension which isn't valid for my case.