express - less 中的 @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)？或者也许是 less 编译器本身的某种插件？

现在，我在应用程序中通过快速中间件提供的文件较少，但如果有解决方案，我可以轻松切换到 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 通配模式明确说出您想要的文件夹以及顺序。