@import 目录语句在less

Question

我现在的less组织如下：

styles/pages/page1/index.less
styles/pages/page1/tab1.less
...
styles/widgets/widget1.less
styles/widgets/widget2.less
...
styles/tools/partials.less
...
styles/app.less

我的整个 app.less 文件都是 @import 语句，用于将所有其他部分纳入其中。

@import "tools/partials";
@import "widgets/widget1";
@import "widgets/widget2";
@import "pages/page1/index";
@import "pages/page1/tab1";
//...

这些语句是手动维护的，这很糟糕。有没有更好的办法？

我梦想着这样的事情：

@import "tools/partials";
@import "widgets/*";
@import "pages/**/*";

也许某种脚本可以在编辑器级别处理这个问题（使用 WebStorm）？或者也许是 less 编译器本身的某种插件？

现在我在我的应用程序中通过 express 中间件提供的文件较少，但如果那里有解决方案，我可以轻松切换到 grunt。

Answer 1

看看grunt-less-imports。它根据您的文件维护一个导入文件（在您的情况下为app.less）。

这是我在最近的项目中使用它的方式。我有一堆更少的文件，像这样：

我像这样使用grunt-less-imports (gruntfile.js)：

less_imports: {
        options: {
            banner: '// Compiled stylesheet'
        },
        styles: {
            src: ['<%= config.app %>/assets/less/**/*.less', '!<%= config.app %>/assets/less/styles.less'],
            dest: '<%= config.app %>/assets/less/styles.less'
        }
    },

此任务通过导入创建 styles.less：

因此，您只需添加-删除您的 less 文件，然后执行导入它们的工作。是你要找的吗？

更新

如果您的导入文件需要更多结构，您可以获取一些。例如，我有两个文件较少的文件夹，page-frame-blocks 和 popups，并希望先导入它们：

less_imports: {
        options: {
            banner: '// Compiled stylesheet'
        },
        styles: {
            src: [
                '<%= config.app %>/assets/less/page-frame-blocks/*.less',
                '<%= config.app %>/assets/less/popups/*.less',
                '<%= config.app %>/assets/less/*.less',
                '!<%= config.app %>/assets/less/styles.less'],
            dest: '<%= config.app %>/assets/less/styles.less'
        }
    },

现在我的导入文件如下所示：

要先导入popups 样式吗？只需将其移至src 部分的顶部即可。您明白了 - 您可以使用 grunt globbing 模式明确说出您想要哪些文件夹以及按什么顺序。