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

现在我在我的应用程序中使用快速中间件提供较少的文件,但如果有解决方案,我可以轻松切换到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使用导入:

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

更新

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