Question

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

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

导入：
私人/少/ a.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']);

};

我的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

您可以强制less将css文件作为less文件导入，无论使用@import (less)

扩展名如何

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

导致

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

参考：import options: less

使用@import（less）将导入的文件视为Less，无论文件扩展名如何。

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

1 个答案: