CSS/LESS in template - Front- & Back-End Development - Front- & Back-End Development - Progress Community
 Front- & Back-End Development

CSS/LESS in template

  • CSS/LESS in template
  • Hi,

    I have added a less file to my template Global folder, my cssLoadOrder.xml is

    <?xml version="1.0" encoding="utf-8" ?>
    <cssFiles>
    <file>Layout.min.css</file>
    </cssFiles>

    However,  the page outputs the following, as you can see it is outputting all 3 LESS files and Content.css which isn't in cssLoadOrder.xml, how can I fix this?

    <link href="../global/Layout.min.css?v=635284011100201258" type="text/css" rel="stylesheet" />
    <link href="../global/Content.css?v=635282487645527972" type="text/css" rel="stylesheet" />
    <link href="../global/Layout.css?v=635284011099881239" type="text/css" rel="stylesheet" />
    <link href="../global/Layout.less?v=635284011096491045" type="text/css" rel="stylesheet" />


  • Omitting files from the cssLoadOrder.xml does not prevent them from loading.  Everything in the Global folder will load dynamically.  The cssLoadOrder.xml is just going to determine what order they go in.  If you do not want something to load you will need to remove it from your Global folder and store it elsewhere.
  • I've been using Visual Studio 2013 with Web Essentials to save one minified version of my less file in the Global folder.

     

    With Visual Studio 2015, the less functionality has moved to the Web Compiler extension and I do not see a way to save ONLY the minified version of a compiled less file. I now have compiledfile.css and compiledfile.min.css saved in my Global folder. Any have a work-around for this?

    My compilerconfig.json looks like this: 

        "outputFile": "App_Data/Sitefinity/WebsiteTemplates/xxx/App_Themes/xxx/Global/sftheme.css",
        "inputFile": "App_Data/Sitefinity/WebsiteTemplates/xxx/App_Themes/xxx/LESS/sftheme.less",
        "minify":
          "enabled": true
        ,
        "options":
          "sourceMap": false
        ,
        "includeInProject": false