LESS-Middleware: Perfect Combination of Node. js and LESS-

LESS is a good way to write CSS. It allows you to use variables, nested rules, and many other useful functions. It helps you better organize your CSS code. Recently I have been studying Node. js and want to use less-middleware. In this way, I ...,. LESS is a good way to write CSS. It allows you to use variables, nested rules, and many other useful functions. It helps you better organize your CSS code.


Recently I have been studying Node. js and want to use less-middleware, so that I can easily use LESS in my applications. After configuration, LESS-Middleware can automatically compile your LESS code as CSS code.

If you store the LESS and CSS files in the same directory, the configuration is very simple, but I want to use different paths for my source directory and target directory. This is a bit of a problem, so here, I want to record the problems I found.


If you specify a different "src" and "dest" directory, you must also provide the "prefix" option, which must match the directory following your target directory. The following is an example for your understanding:

1. Var lessMiddleware = require ("less-middleware ");
   
2. 
   
3. 
   
4. 
   
5. App. use (lessMiddleware ({
   
6. 
   
7. Src: _ dirname + "/less ",
   
8. 
   
9. Dest: _ dirname + "/public/css ",
   
10. 
    
11. Prefix: "/css ",
    
12. 
    
13. Force: true
    
14. 
    
15. }));
    
16. 
    
17. App. use (express. static (_ dirname + "/public "));

In this example, I configure the source directory as the "/less" directory under the root directory of my application and output CSS to the "/public/css directory. In addition, you need to specify the "prefix" attribute to match the directory following "/public", that is, the "/css" directory.


You can also specify other parameters, with the force parameter specified above, so that the LESS file can be re-compiled every time a request is made, and then combined with the automatic refresh function, in this way, you can modify the style code during development to achieve immediate effect.


Finally, reference the CSS file on the page is the same as normal:

When this article was published, less-middleware was updated to version 1.0.3. The above configuration is for version 0.1.x. The following describes how to migrate from 0.1.x to 1.0.x.


First, it is also an important change-changes to the source directory parameters, which were previously placed in the options parameter, as shown below:

1. LessMiddleware ({
   
2. 
   
3. Src: path. join (_ dirname, '/public ')
   
4. 
   
5. })

Because the source directory is a required parameter, the upgrade is the first parameter of the middleware, as follows:

1. LessMiddleware (path. join (_ dirname, '/public '))

The second change is Middleware parameter and LESS parameter SeparationIn this way, the parameter structure is clearer as follows:

1. LessMiddleware (source, [{options}], [{parserOptions}], [{compilerOptions}])

The options parameter is provided to the middleware, while the following two parameter objects do not affect the middleware and are passed to the LESS parsing and compiler.


After this adjustment, the corresponding parameter definition method must be adjusted accordingly. The following are some corresponding modifications:


Compress: Remove from options, which must be defined in compilerOptions;
DumpLineNumbers: Remove from options, which must be defined in parserOptions;
Optimization: Remove from options, which needs to be defined in parserOptions;
Paths: Remove from options, which must be defined in parserOptions;
Preprocessor: it has been moved to preprocessor. less for definition;
RelativeUrls: Remove from options, which must be defined in parserOptions;
SourceMap: Remove from options, which must be defined in compilerOptions;
Yuicompress: removed from options, which must be defined in compilerOptions;


The third change is the addition of new parameters and the removal of prefix and treeFunctions parameters, which allows you to configure more flexibly, as shown below:


Postprocess.css: Modify the CSS compilation output before being saved;
Preprocess. less: Make changes before LESS is parsed and compiled;
Preprocess. path: Modify the LESS path before being loaded by the file system;


With these parameters, the features we previously implemented using prefix can achieve the same effect in the following ways:

1. Preprocess :{
   
2. 
   
3. Path: function (pathname, req ){
   
4. 
   
5. Return pathname. replace (/^ \/less \ //, '/css ');
   
6. 
   
7. }
   
8. 
   
9. }

For more information, see the official less-middleware documentation.