1

我有一个巨大的样式表代码库，其中包含多个文件夹和子文件夹中的许多 .scss 文件，我想将它们编译为 .css 文件。到目前为止，一切都很好。

但无论出于何种原因，我都需要将 .css 文件编译到与每个源文件夹中的 .scss 文件不同的目标文件夹中。

我拥有的源路径：

  • src/project-1/scss/project-1.scss
  • src/project-2/subfolder/scss/project-2.scss

我需要的目标路径：

  • src/project-1/css/project-1.css
  • src/project-2/subfolder/css/project-2.css

我的 grunt 任务设置是这样的：

sass: {
    prod: {
        options: {
            style: 'expanded'
        },
        files: [{
            expand: true,
            cwd: 'src',
            src: ['**/*.scss'],
            dest: 'src',
            ext: '.css',
        }]
    }
}

此设置将每个 .css 文件编译到与 .scss 文件相同的文件夹中。我需要将它们从“scss”文件夹中取出并放入同一父文件夹中的“css”文件夹中。

寻找解决方案：

我在该领域尝试了不同的值，但dest没有任何运气。

我尝试使用 grunt-contrib-copy 和一个rename()函数：

copy: {
    target: {
        files: [{
            expand: true,
            cwd: 'src',
            src: ['**/*.css'],
            dest: 'src/',
            rename: function(dest, src) {
                return dest + src.replace(/\/scss\/$/, "/css/");
            }
        }]
    }
}

后者“几乎”有效。我将文件复制到自己的目的地，同时尝试将“scss”文件夹重命名为“css”，但替换功能似乎没有考虑源路径中的文件夹名称，只有文件名。

我是接近解决方法还是正走向死胡同？

编辑：找到解决方案

rename我对解决我的问题的函数做了一些小改动：

sass: {
    prod: {
        options: {
            style: 'expanded'
        },
        files: [{
            expand: true,
            cwd: "src",
            src: ["**/*.scss"],
            dest: "src/",
            ext: ".css",
            rename: function (dest, src) {
                return dest + src.replace('scss', 'css'); // The target file is written to folder "css" instead of "scss" by renaming the folder
            }
        }]
    }
}

这给了我在与源 /scss 文件夹相同级别的新 /css 文件夹中编译的 CSS。

例如：

src/project-1/scss/project-1.scss编译为src/project-1/css/project-1.css.

我也对我的任务和任务使用完全相同的files: [{...}]设置，并且它们都写入同一个文件夹和文件。grunt-autoprefixergrunt-contrib-cssmin

4

0 回答 0