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

Question

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

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

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

我的咕噜声文件：

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']);

};

我的玉文件有一个导入语句：

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

无论扩展名如何，您都可以强制less将css文件作为less文件导入，方法是使用@import (less)

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

这导致

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

参考：进口选项：少

使用 @import (less) 将导入的文件视为 Less，而不考虑文件扩展名。