适当的自动修复插件为我的少中间件节点expressjs



目前我使用较少的中间件(https://www.npmjs.com/package/less-middleware)。我对这个解决方案不满意,因为less- middleware创建了一个编译的css文件。我想要一个记忆的解决方案,我可以通过expressjs路由。

此外,我想使用一个适当的自动修复解决方案,因为有很多很好的css技术我不能使用,因为我需要很多时间来添加供应商前缀。

  1. 有谁知道一个更好的解决方案,即时更少的编译而不输出一个单独的css文件。
  2. 这个解决方案能提供某种自动修复功能吗?
  3. 确实提供了更少的中间件,提供了自动修复功能。我没有在那个方向找到什么。

你应该试着重新格式化你的问题,因为:

要求我们推荐或查找书籍、工具、软件的问题库、教程或其他场外资源与Stack无关泛滥,因为他们往往会吸引固执己见的答案和垃圾邮件。相反,你应该描述这个问题,以及到目前为止已经采取了哪些措施来解决它它。

我找到https://github.com/toogle/express-less/blob/master/lib/express-less.js根据他们的包。Express LESS中间件使用最新版本的Node LESS。

在他们的代码中调用less.render(): https://github.com/toogle/express-less/blob/master/lib/express-less.js#L68和更多的信息可以在这里找到:http://lesscss.org/usage/#programmatic-usage

从Less的版本2开始,你可以使用插件。自动修复插件可在:https://github.com/less/less-plugin-autoprefix

所以你应该能够使用下面的代码:
var express = require('express'),
    expressLess = require('express-less'),
    autoprefixer = require('less-plugin-autoprefix');
var app = express();
app.use('/less-css', expressLess(__dirname + '/less',  { plugins: [autoprefixer] }));

参见:http://lesscss.org/usage/#plugins-using-a-plugin-in-code

注意,我没有测试上面的代码。我想知道如何设置自动修复选项。根据https://github.com/plus3network/gulp-less#using-plugins,您应该使用:

var autoprefixerPlugin = require('less-plugin-autoprefix'),
autoprefixer = new autoprefixerPlugin({options});
var app = express();
    app.use('/less-css', expressLess(__dirname + '/less',  { plugins: [autoprefixer] }));

根据Less Engine的文档,使用插件的方法如下:

less.render(myCSS, { plugins: [myPlugin] })

来源:http://lesscss.org/usage/plugins-using-a-plugin-in-code

然后根据Less Middleware的文档,render()函数的第二个参数增加选项的方法如下:

options.render直接传递到less.render,中间件的默认值或更改最小。

来源:https://github.com/emberfeather/less.js-middleware渲染选项

因此,根据Less Autoprefixer的文档和Express Engine的文档,使用它的最终和真实的方法是使用以下代码:

var express = require('express'),
    lessMiddleware = require('less-middleware'),
    lessPluginAutoprefix = require('less-plugin-autoprefix'),
    app = express(),
    autoprefixPlugin = new lessPluginAutoprefix({ 
        browsers: ["last 2 versions"] 
    });
app.use(lessMiddleware(path.join(__dirname, 'public'), {
    render: {
        plugins: [
            autoprefixPlugin
        ]
    }
}));

最新更新