如何将lesshat导入每个编译的.less文件答案

【问题标题】：How to import lesshat into every compiled .less file如何将lesshat导入每个编译的.less文件
【发布时间】：2015-01-30 19:16:28
【问题描述】：

在 grunt-contrib-stylus 中有一个导入选项：

导入

类型：数组

将给定的手写笔包导入每个已编译的 .styl 文件，就好像您在每个所述文件中都写了 '@import '...'。

options: {
            compress: false,
            use: [ require('kouto-swiss') ],
            import: [ 'kouto-swiss' ]
         },

如何在 grunt-contrib-less 中使用 lesshat 做同样的事情？

谢谢

【问题讨论】：

AFAIK 没有本地方法可以使用 lessc/grunt-contrib-less 执行此操作。（因此，您需要一些技巧，例如通过单独的 Grunt 任务将 @import "your-file-of-interest";" 字符串/文件简单地连接/注入到每个 less 文件中）。
见：github.com/less/less.js/issues/2402

标签： gruntjs less grunt-contrib-less lesshat

【解决方案1】：

从第 2 版开始，您可以轻松地为 Less 创建插件。感谢Implementing preprocessing plugins，您也可以创建预处理插件。

预处理插件使您可以在处理之前注入更少的代码：

 LesshatProcessor.prototype = {
            process : function (src, extra) {
            var injected = '@import "' + path.resolve(__dirname, '../') + '/node_modules/lesshat/build/lesshat.less";\n';
            var ignored = extra.imports.contentsIgnoredChars;
            var fileInfo = extra.fileInfo;
            ignored[fileInfo.filename] = ignored[fileInfo.filename] || 0;
            ignored[fileInfo.filename] += injected.length;
            return injected + src;
            }
};

我已经创建了一个 Lesshat 插件：https://github.com/bassjobsen/less-plugin-lesshat。通过运行npm install less-plugin-lesshat 安装此插件后，您就可以运行：lessc file.less --lesshat。

您也可以将此插件与 grunt-contrib-less 一起使用：

grunt.initConfig({
    less: {

        options: {
           plugins: [
                new (require('less-plugin-lesshat'))()
            ]
       },
        files: {'css/test.css' : 'less/test.less'}
      }
)};

请注意，您应该使用 grunt-contrib-less 安装最新版本的 Less，直到 Less 具有 updated the version number（并且 grunt-contrib-less 使用该版本）。

现在使用插件：

运行npm install grunt-contrib-less
导航到node_modules/grunt-contrib-less/
删除node_modules/less
在https://github.com/less/less.js/archive/master.zip下载并解压最新版本的Less
运行npm install ./less.js

【讨论】：