grunt-contrib-less 不会导入 .css 文件

Question

我的主要less文件@private/less/app.less

@import 'a.less';
@import 'b.css';

正在导入：
private/less/a.less
& private/less/b.css

我的 grunt 文件：

module.exports = function(grunt) {

    grunt.initConfig({
        less: {
            development: {
                options: {
                    paths: ["/css"],
                    yuicompress: true
                },
                files: {
                    "public/css/app.css": "private/less/app.less"
                }
            },
        },

        // running `grunt watch` will watch for changes
        watch: {
            less: {
                files: ['private/less/**/*.less'],
                tasks: ['less'],
                options: {
                    spawn: false
                }
            }
        }
    });

    grunt.loadNpmTasks('grunt-contrib-less');
    grunt.loadNpmTasks('grunt-contrib-watch');

    grunt.registerTask('default', ['less', 'watch']);

};

我的 jade 文件有这样的导入语句：

link(rel='stylesheet' href='css/app.css')

CSS输出@public/css/app.css

// all the a.less styles ....
@import 'b.css';

这给我一个找不到文件的错误，因为它使用的是 css @import 方法。

有人对在使用 grunt-contrib-less 编译的 .less 文件中导入 .css 文件的方法有任何建议吗？

Answer 1

您可以使用 @import (less)

强制 less 将 css 文件作为 less 文件导入，而不考虑扩展名

@import 'a.less';
@import (less) 'b.css';

这导致

// all the a.less styles ....
// all the b.css styles ....

参考：import options: less

Use @import (less) to treat imported files as Less, regardless of file extension.

grunt-contrib-less 不会导入 .css 文件

grunt-contrib-less won't import .css files

gruntjs

grunt-contrib-less