The perfect match between Node.js and LESS

LESS is a great way to write CSS, allowing you to use variables, nested rules, mixins, and many other useful features that can help you better organize your CSS code.
I have been studying Node.js recently and wanted to use less-middleware middleware so that I can easily use LESS in my application. After configuration, LESS-Middleware can automatically compile your LESS code into CSS code.

If you store LESS and CSS files in the same directory, the configuration is simple, but I want to use different paths for my source directory and target directory, and there is a bit of a problem here, so here, I thought I'd document 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. Here is an example to help you understand better:

var  lessMiddleware = require("less-middleware");
app.use(lessMiddleware({
    src: __dirname + "/less",
    dest: __dirname + "/public/css",
    prefix: "/css",
    force: true
}));
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 let CSS is output to the "/public/css" directory. In addition, you also need to specify the "prefix" attribute to match the directory following "/public", that is, the "/css" directory.
You can also specify other parameters, The force parameter is specified above, which allows the LESS file to be recompiled every time it is requested, combined with the automatic refresh function, so that modifications to the style code during development can have immediate effects.
Finally, referencing the CSS file on the page is the same. It’s the same as normal:

<link rel="stylesheet", type="text/css", href="css/styles.css">

When this article was published, less-middleware has been updated to version 1.0.3. The above configuration is for 0.1.x. Here is an introduction to how to start from 0.1.x is migrated to 1.0.x.
First of all, it is also an important change - the change of the source directory parameter, which was previously placed in the options parameter, as follows:

lessMiddleware({
  src: path.join(__dirname, '/public')
})

Because the source directory It is a necessary parameter, so it will be used as the first parameter of the middleware after the upgrade, as follows:

lessMiddleware(path.join(__dirname, '/public'))

The second change is the separation of middleware parameters and LESS parameters, so that the parameter structure is clearer, as follows ：

lessMiddleware(source, [{options}], [{parserOptions}], [{compilerOptions}])

The options parameter is provided to the middleware, and the latter two parameter objects will not affect the middleware and are passed to the LESS parsing and compiler
After this adjustment. , the corresponding parameter definition method must also be adjusted accordingly. Here are some corresponding modifications:

compress: removed from options, needs to be defined in compilerOptions;
dumpLineNumbers: removed from options, needs to be defined in compilerOptions Defined in;
optimization: removed from options, needs to be defined in parserOptions;
paths: removed from options, needs to be defined in parserOptions;
preprocessor: has been moved to preprocessor.less for definition ;
relativeUrls: removed from options, needs to be defined in parserOptions;
sourceMap: removed from options, needs to be defined in compilerOptions;
yuicompress: removed from options, needs to be defined in compilerOptions;
The third change is that new parameters have been added and the prefix and treeFunctions parameters have been removed, allowing you to configure it more flexibly, as follows:
postprocess.css: Modify the CSS compilation output before being saved;
preprocess.less: Modify LESS before it is parsed and compiled;
preprocess.path: Modify the LESS path before being loaded by the file system;
With these parameters, we used prefix to achieve it before Function can be used to achieve the same effect in the following way:

preprocess: {
  path: function(pathname, req) {
    return pathname.replace(/^\/less\//, '/css');
  }
}

The above is the detailed content of The perfect match between Node.js and LESS. For more information, please follow other related articles on the PHP Chinese website!