Less.js: 支持@imports 的文件通配符

酷..虽然只有节点（不是浏览器）并且不认为它会帮助其他
问题。 我猜可能有用..通常你会有一个依赖链
所以你不希望一切都按字母顺序排列。

是的，浏览器无法知道要请求哪些文件，所以它看起来像是一个非首发。

好吧，我不会仅仅因为它只适用于节点而排除它，但我也不认为它是一个特别重要的功能请求。

@agatronic关于依赖链，我昨天在节点聚会上和某人谈论了同样的事情。 我认为这对组件/模块库、mixin 等很有用，如示例中所示。 是的，节点只是我的想法。

我刚刚读到手写笔允许您指定一个目录，如果您这样做，它会查找index.sty - 我喜欢这样。

至于导入目录中的每个文件，只有当文件仅包含 mixins（无内容）时才真正有用。因为顺序很重要。 不确定那是现实生活中的场景吗？

我喜欢索引的想法。 这是一个很好的方法。

只有当文件只包含 mixins（无内容）时，它才真正有用。

我们大量使用基于组件的开发。 我们的大多数 Less 组件对其他文件的依赖为零。 当然，顺序在 CSS 和更传统的设计模式中确实很重要，所以我认为你是对的。 大多数人可能不会像我那样使用它——这意味着他们可能不会全部使用它。 但是手写笔索引的想法是一个有趣的解决方案。

这不是优先事项，但我刚刚看到并想将其添加为参考： https ://github.com/chriseppstein/sass-globbing

我是 Sass 的忠实粉丝，我一直在使用 Chris Eppstein 的 glob 导入插件（在 windows 机器上的队友无法使用它，所以请记住这一点）。

我一直在寻找LESS中的等价物，有人看到类似的东西吗？

是的，我肯定是这个插件的粉丝。 我认为任何使用过 globbing 的人都知道使用它有多好，但在你真正使用它之前，它是那些看起来“很高兴”的东西之一。 我无法想象现在尝试在没有它的情况下进行构建。 您可以使用assemble-less ，它支持通配符（我是它的维护者之一......）

顺便说一句@josephspens我昨天创建了这个项目，用于将 SASS 转换为 LESS。 作为概念验证，我将.scss文件从bootstrap-sass和Foundation转换为 LESS，这两个示例都在./test/文件夹中。 实际上，我很惊讶将所有 Bootstrap .scss文件都转换回 LESS。 尝试在转换后的 sass 文件和“本机”无引导文件 (v2.3.1) 之间进行比较 - 它的功能不完整，但可以节省大量时间。

如果您最终不得不在项目中使用 LESS，这可能值得一试。 对于某些语言特性，逆向转换 LESS 到 SASS 的过程应该不难

@lukeapage ，您在此处提到https://github.com/cloudhead/less.js/issues/1181#issuecomment -13546979，这仅对 mixin 库有用，当时确实如此。

然而，现在我们有了<strong i="8">@import</strong> (reference) ，这个特性对于每个可以引用的样式表都很有用。

另外，我想到了index.less概念并为它创建了一个请求： https://github.com/cloudhead/less.js/issues/1339。 但我不认为这些功能是相互排斥的，甚至不一定相关。 globbing 允许包含和排除模式，因此您可以从 import 语句本身中的 globbing 模式中进行大量控制。

我认为 index.less 功能将解决一个完全不同的挑战，这更像是定义依赖关系——对模块、组件、主题等非常有用。

@jonschlinkert我同意

@lukeapage你能告诉我代码中的哪些地方需要修改（除了树/导入/.js吗？），或者我需要考虑的建议，例如这是否特定于节点等。 ? 我可能会试一试。

这将是一个很棒的功能。 我目前在我的bundle.less文件中有很长的样式表列表：

<strong i="7">@import</strong> 'pages/home';
<strong i="8">@import</strong> 'pages/login';
<strong i="9">@import</strong> 'pages/404';
//etc

将其浓缩为：

<strong i="13">@import</strong> 'pages/*';

或类似的。

Stylus 允许你这样做—— <strong i="5">@import</strong> 'partials/*.styl ——而我_所有_时间都在使用它。 也会非常有兴趣在 Less 中使用它，以减轻我手动记账导入的繁琐任务。

这 + 显式导入 + 非重复将非常方便：

// Import specific file
<strong i="6">@import</strong> "extras/specific.less"
// Import all others, specific file is skipped in this glob
<strong i="7">@import</strong> "extras/*.less"

@lukeapage我想为此做一个插件，你能给我一些关于从哪里开始的指示吗？ 谢谢

对不起，乔恩，我错过了你的第一个帮助请求，这不是故意的。
我认为我们最好将它放在核心中（因为插件会想要
覆盖标准节点文件访问 - 你可以继承和实现
但这会阻止另一个插件在它之上构建，除非它们是
非常小心），无论如何我至少会为 core 添加支持 import ing
一次导入多个文件。 今天有可能，新的凉亭插件
做到了，但它有点hacky。 会联系的。

哈，我没有意识到我已经发表了评论，所以这让我们两个哈哈大笑。 完全不用担心我知道它是怎么回事。

可能最好把它放在核心

听起来不错。 我也很乐意为此提供帮助。 无论哪种方式都无需担心。

好的，一直在想，这就是我的做法。

1. 将 expandToFilelist 添加到抽象文件管理器。 默认情况下它应该
   返回一个包含给定文件名的数组。 不确定是否应该
   是同步的还是异步的——可能没关系——让它异步？
2. 在导入管理器中，一旦您拥有文件管理器，就调用该函数。 然后
   遍历所有文件并在每个文件上执行您在 1 上执行的操作。
3. 我会让导入管理器等到它得到所有文件的结果
   在以这种方式回调回调（在导入访问者中）之前
   我们可以保持一致的顺序。 回调现在需要一个
   包含所有参数的数组（例如，必须接收一次完整的文件名
   每个文件）。
4. 在上下文中导入访问者可能会出现复杂情况 - 不是
   当然
5. 导入现在将采用一个根数组（或者可能是一个根数组
   和文件名）。 它将需要评估其 eval 函数中的所有根，并且
   返回一个组合的根..或者可能使用数组创建一个新的规则集
   evald 根，如果可行的话
6. 编译和测试 - 应该都可以
7. 如果文件名更改节点文件管理器以实现 expandToFilelist
   包含 *
8. 添加测试并将测试添加到 Jasmine 部分中的排除项
   gruntfile，因为我们无法为浏览器实现
   瞧！

只是想评论一下，作为一种解决方法，如果您使用 gulp 作为构建工具，则可以将gulp与gulp-concat一起使用。

gulp.src([
    'src/styles/main.less'
    ,'src/controls/**/*.less`
])
.pipe(concat('bundle.less')
.pipe(less())
...

这实际上是我的目录结构......（虽然，我的结构有点不同）。 我希望这是一个内置功能，即使只有节点会非常有用。

只是以为我会在这里+1……这是一种很常见的模式。 还有一些简单的解决方法可以避免订单问题。

+1

我没有说，但我会很感激这个选项（即使只有服务器端）......

哦，具有讽刺意味的是（主要库变成了 js，因为同一个库可以用于服务器和客户端，只是添加了一个仅限服务器的功能）。

解析引擎可以保留奇偶校验。 这仍然是一个巨大的优势，与我们正在讨论的内容无关。

+1

好像还不够：+1

+1 认真

+1

:+1:

+1

+1

+1

+1

:+1: 请！

+1 jesus 会对通配符支持感到满意。

嘿伙计们，反馈很好，但是+1不会让这个功能更快地发生。 它被标记为准备实施，当有人实施它时，它就会实施。

+1 jesus 会对通配符支持感到满意。

我认为可以肯定地说，如果耶稣要选择一个预处理器，那就少了。

因为我已经等不及这个问题的解决了，所以我编写了插件来完成它，并将它用于我的项目。 https://github.com/just-boris/less-plugin-glob
Less 允许为@imports创建自定义文件加载器。 我已经创建了这个解决导入路径中的 glob 的导入。 任何反馈将不胜感激。

@just-boris 嗨，我想知道除了 NPM 之外如何安装它，

使用 NPM 时出现以下错误：

npm 错误！ 404 'less-glob-plugin' 不在 npm 注册表中。
npm 错误！ 404你应该让作者发布它
npm 错误！ 404
npm 错误！ 404 请注意，您也可以从
npm 错误！ 404 tarball、文件夹或 http url 或 git url。

在此先感谢，这将节省很多心痛。

@tonyflp ，对不起，有一个错字，你应该安装less-plugin-glob 。
Less 只接受以less-plugin-*表示法命名的插件

@just-boris 效果很好，谢谢。

此功能没有更新？

just-boris 我使用 grunt-contrib-less 他们有一个示例如何加载插件，如下所示：

插件：[
new (require('less-plugin-autoprefix'))({browsers: ["last 2 versions"]}),
新的（需要（'less-plugin-clean-css'））（cleanCssOptions）
],

我将如何在此处加载您的精彩插件，以便它与 grunt-contrib-less 一起使用？

大 :+1: 功能

@vospascal在我的仓库中回答

;) thnx @just-boris 我看到了 :-) :+1:

仍在等待此功能 :+1: 。 谢谢，@just-boris。

@just-boris 谢谢！ 我的意思是谢谢你:-)

这对我来说将是一个非常有用的功能，因为我更喜欢将所有组件捆绑在一个位置，而不是将所有 Less 文件放在一个位置。 这导致 Less 文件到处存在，这将是维护手动导入列表的噩梦。

对于使用 Gulp 构建他们的 Less 文件的任何人，我已经成功使用 gulp-inject 插件在我的主 Less 文件中自动创建@import语句。 我在这里做了一个简短的记录：http: //www.michaelbromley.co.uk/blog/425/automatic-import-of-lesssass-files-with-gulp

为了减少内容，您可以在项目中简单地运行它，

npm install less-plugin-glob --save-dev

然后将其添加到您的较少任务的选项组中的 Gruntfile

plugins: [require('less-plugin-glob')]

结果是这样的：

···
options: {
    compress: true,
    yuicompress: true,
    optimization: 2,
    cleancss: true,
    sourceMap: false,
    sourceMapFilename: 'css/maps/style.css.map',
    plugins: [require('less-plugin-glob')]
},
···

现在在你的 .less 文件中你可以这样写：

···
<strong i="15">@import</strong> "commons/**/*";
<strong i="16">@import</strong> "basic/**/*";
···

来到这里想知道是否支持 glob 导入，但是因为我在构建过程中使用了几个单行 shell 脚本而不是 grunt/gulp。 我最终只使用find和cat并且我的来源比任何替代品都更干净。 更少仍然很棒。

# src/index.less + src/foo/bar.less + ... = dist/index.css
find -X src -type f -name '*.less' | xargs cat | lessc - | cleancss --s0 >dist/index.css

+1

真的很惊讶这件事现在还没有发生。 Gulp 至少支持这个功能。

@davidcalhoun阅读此线程中的第一篇文章。

同样，据我所知，大多数人都将他们的 LESS 文件编译成 CSS ，我不知道有多少网站让浏览器直接解释 LESS？ 对于那些希望调试的人，可以使用源映射

@just-boris 我无法让你的插件工作......我想我做错了什么。

有没有其他人让它工作？

没有收到任何错误......当我尝试使用通配符时没有输出。

gulp.task( 'styles', () => {
  return gulp.src( [ 'app/styles/main.less' ] )
    .pipe( $.less( {
      plugins: [ require( 'less-plugin-glob' ) ],
    } ) )
    .pipe( gulp.dest( 'dist/styles' ) );
} );

// main.less
// Each line below is tried on it's own of course.
<strong i="10">@import</strong> "app/module/waffle.less"; // Works
<strong i="11">@import</strong> "app/module/**"; // Does not work.
<strong i="12">@import</strong> "app/module/**/*"; // Does not work.
<strong i="13">@import</strong> "app/module/**/*.less"; // Does not work.

@SpencerCarstens最好在插件自己的存储库中提出问题。

@七相最大：+1：

我希望能接触到更多的观众，但你是对的。

@seven-phases-max 您不能将 glob-plugin 集成到 less 中吗？

它集成得很好，但似乎没有做任何事情。

如果我注释掉插件，那么我在导入时的错误就不太正确了
全球化。

当我把它放回去时，错误就停止了。

所以，我认为它正在做某事。

2015 年 8 月 5 日，星期三，Mattia Astorino [email protected]
写道：

@SpencerCarstens https://github.com/SpencerCarstens你不能集成
里面的glob-plugin少吗？

—
直接回复此邮件或在 GitHub 上查看
https://github.com/less/less.js/issues/1181#issuecomment -128262749。

亲切地，

斯宾塞·卡斯滕斯

@equinusocio

你不能在 less 里面集成 glob-plugin 吗？

如果您的意思是“为什么不将其放入核心”...那么，当前的 Less 方法（在此处跨多个线程的多个讨论中设置的更少或更多）大致是：“永远不要将功能放入核心， _before_它变得绝对且完全明显，该功能属于那里，没有其他方法”。 也就是说，如果某些东西可以作为插件来实现，它_应该_作为插件来实现（这就是为什么即使是长期存在的核心clean-css设施也从核心移动到相应的插件） .

@seven-phases-max 好的，谢谢。 我喜欢这个。

在@just-boris 的插件中实现的关闭。

+1

+1

谈论复活旧线程

这些 +1 应该表示什么？ 插件不能用吗？

+1 表示你也想要或支持它

支持什么？ 这就是我要说的。 此问题已得到解决，问题已关闭。 所以我在问什么是+1？

我收到这些电子邮件已有 2 年多了，这是怎么回事..