css - 使用 grunt-contrib-less 内联。为每个 LESS 文件生成一个 CSS 文件

Question

我正在尝试使用grunt-contrib-less grunt 任务将我的less文件编译为 css。我想做的是内联编译它们，以便每个.less文件创建一个.css文件。

工作流程：

1）初始文件系统：

someFolder2
    joe.less
    rachel.less
    someSubFolderA
        jake.less
        bob.less
someFolder4
    someSubFolderB
        ally.less

2）运行grunt less

3）文件系统：

someFolder2
    joe.less
    rachel.less
    joe.css
    rachel.css
    someSubFolderA
        jake.less
        bob.less
        jake.css
        bob.css
someFolder4
    someSubFolderB
        ally.less
        ally.css

我玩过各种选择，但我不知道如何做到这一点。任何建议将不胜感激。这是我一直在使用的起点 grunt 任务：

less: {
    paths: [
        "src/someFolder2/**/*.less",
        "src/someFolder4/**/*.less"
    ],
    options: {
        // outputSourceFiles: true
        // compress: true,
        // sourceMap: true,
        // sourceMapFilename: "jake.txt"
        // outputSourceFiles: true
    }
}

这将（我认为）将所有较少的文件合并到一个 CSS 文件中。

Answer 1

您必须为 grunt 定义任务

options: {
    paths: ["<%= cfg.dist %>/src/less"],
    sourceMap: true,
    rootpath: "<%= cfg.dist %>/",
    relativeUrls: false,
    cleancss: false
},

test: {
    files: [
        {
            expand: true,
            cwd: '<%= cfg.dist %>/src/less/',
            src: ['*.less'],
            dest: '<%= cfg.dist %>/build/css/',
            ext: '.css'
        }
    ]
}

/src/less/ - 你的 less 文件的位置

/build/css/ - 将生成 css 的文件夹