@import目录语句少

Question

我现在较少的组织如下：

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）？或者为编译器本身提供某种插件？

现在我在我的应用中提供来自快速中间件的较少文件，但如果那里有解决方案，我可以轻松切换到咕噜声。

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：

所以你只需添加 - 删除较少的文件，任务就可以导入它们。这是你在找什么？

更新

如果您的导入文件中需要更多结构，则可以获得一些结构。例如，我有两个包含较少文件的文件夹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模式的顺序。