Import Less File Only for One Page

Import LESS file only for one page

On your homepage use:

<body class="homepage">

And then in your Less files:

.homepage {
  @import "homepage.less";
}

The above still compiles all your code in a single file. Your compiled CSS code will have a larger number of bytes, but you can cache the same file for all your pages.

import .less files into single .less without recompiling

The base.less file should contain the following lines of code:

@import "1file.less";
@import "2file.less";
@import "3file.less";

You should only compile the base.less file.

You can use the command line lessc compiler, see: http://lesscss.org/usage/#command-line-usage. You should use the following command to compile:

>> lessc base.less > base.css

Alternatively you can use the client side compiler as describe at: http://lesscss.org/usage/#using-less-in-the-browser

Notice that you should only link the base.less file in your HTML. The head section of your HTML should contain the following lines of code:

<link rel="stylesheet/less" type="text/css" href="base.less">
<script src="less.js" type="text/javascript"></script>

(AngularJS) Only one less file for entire Website

I solve my problem by adding specific class on body tag depending the route.
I put a variable in rootScope called 'pageStyle' with correspond to the classname that I want. This variable is updated automatically when route change (see run function). There is an event when the route change ($stateChangeSuccess or $routeChangeSuccess depending if you are using ngRoute or -angularui-routeur).

In my case i would like to add the name of the route but you can do it with the controller name or something else.

Here is an example

This is the routes :

angular
  .module('frontApp', [])
  .config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider, $mdThemingProvider) {
    $urlRouterProvider.otherwise('/');
    $stateProvider
      .state('home', {
        url: '/',
        templateUrl: '../views/home.html',
        controller: function ($scope) {
          $scope.msg = 'Xavier';
        }
      })
      .state('form', {
        url: '/form',
        templateUrl: '../views/form.html',
        controller: 'FormCtrl'
      });
  }])

And in the run function you will see the event bound to adapt the class when route change :

  .run(function($rootScope) {
    $rootScope.pageStyle = '';
    // Watch state and set controller name in pageStyle variable when state change
    $rootScope.$on('$stateChangeSuccess', function(event, toState) {
      event.preventDefault();
      if (toState && toState.name && typeof toState.name === 'string'){
        $rootScope.pageStyle = toState.name;
      } else {
        $rootScope.pageStyle = '';
      }
    });
  });

Extra informations :

Note that the event called when route change is different if you are using ngroute. use "$routeChangeSuccess" if you use ngRoute and "$stateChangeSuccess" if you choose to use angular-ui-routeur

If you want to add the controller name instead the route name simply use the follow and replace 'ctrl' with you controller suffixe:

if (toState && toState.controller && typeof toState.controller !== 'function'){
    $rootScope.pageStyle = toState.controller.toLowerCase().replace('ctrl','');
}

Hope it help someone else

How to import LESS file, but not render it?

This has nothing to do with MVC, this is something you have to do in the LESS itself. See: http://lesscss.org/features/#mixins-feature-not-outputting-the-mixin

Essentially, if you don't want the mixin output as a class, you just need to suffix it with parenthesis:

.primary-font() {
    font-family: Arial;
}

import less file to another less file but not include it's content

Found a way. I had to use import like this:

@import (reference) "bootstrap.less";

.myclass{color:@bootstrap-variable;}
.anotherclass{.classDefinedInBootstrapLessWhichUsesAVariableDefinedInVariablesLess}

Using "reference" will source the imported file but not include it.

Import LESS files on demand

I have not been able to find a way to make this fully automated. I also do not know if you are desiring this functionality in order to reduce @import requests or to simply reduce the final CSS to not load items it does not need.

If you do not need it to be fully automated, and you are seeking just to reduce the CSS generated, and you do not have too many classes you desire to do this with, then you can do something like the following in your styles.less file.

//have at the top of the file some variables set to 0 or 1 if the class
//is present or absent in that file
@usesClass-infobox: 0;

//set up a mixin to load it if NOT in the file
.setClass-infobox(@set) when (@set = 0) {
  @import 'infobox.less'; 
}

//a default mixin to do nothing otherwise
.setClass-infobox(@set) {}

//call the mixin
.setClass-infobox(@usesClass-infobox);

Of course, this does not really help automate the process. After all, if you know .infobox is not in the styles.less file, then you would just add the @import anyway without any extra mixins to check. The only real value this gives is that it sets up a section of variables that basically informs the coder that "Hey, there are modules that can be loaded for this functionality if you are not including it here; so tell me, are you including it?"

Again, I'm not sure if this totally resolves what you are going for. I offered it as it could be useful for some people in some situations.

CSS/less from header file only works on the index page

instead of this

<?php namespace ProcessWire; ?>
<!DOCTYPE html>
<html lang="en">
    <head>
      <meta http-equiv="content-type" content="text/html; charset=utf-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <meta http-equiv="x-ua-compatible" content="ie=edge">
      
      <title><?php echo $page->title; ?></title>
      <meta name="description" content="<?php echo $page->summary; ?>" />
      <!-- MDB icon -->
      <!--  <link rel="icon" href="img/mdb-favicon.ico" type="image/x-icon">  -->
          
    
      <!-- Font Awesome -->
      <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
      <!-- Google Fonts Roboto -->
      <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap">
      <!-- Google Fonts -->
      <link href='//fonts.googleapis.com/css?family=Lusitana:400,700|Quattrocento:400,700' rel='stylesheet' type='text/css' />
      <!-- Bootstrap core CSS -->
      <link rel="stylesheet" type="text/css" href="site/assets/css/bootstrap/bootstrap.min.css" />
      <!-- Material Design Bootstrap -->
      <link rel="stylesheet" type="text/css" href="site/assets/css/bootstrap/mdb.min.css" />
      <!-- Your custom styles (optional) -->
      <link rel="stylesheet" type="text/css" href="site/assets/less/styles.less" />
    </head>
    <body>

change

<link rel="stylesheet" type="text/css" href="site/assets/less/styles.less" />

<?php include 'site/assets/less/styles.less'; ?>

that should work, and make sure you have

<?php include '/path/to/header.php'; ?>

in all of your files as well that works for me at least.

@Import of less files into a limited scope

According to the css-spec, the @import-declaration has to come before all other declarations in the css-file. So your @import inside the rule is expected to fail. I guess the @importing at the end of the file not failing is goodwill of the browser-vendors.

I guess LESS will abide by the same rules.

EDIT:
the question is, why do you want to have those styles scoped? With proper declarations, this should not be necessary.

Import Less File Only for One Page