Question

如何在SCSS源文件夹以外的文件夹中生成CSS文件，但保留其树的一部分？

让我解释一下，我有几个.scss来源的不同文件夹：

resources/client-1/scss/app.scss
resources/client-2/scss/app.scss

我希望CSS在css文件夹中生成此位置而不是scss。所以：

resources/client-1/css/app.scss
resources/client-2/css/app.scss

但我特别喜欢动态配置，因为client-x文件夹的数量会随着时间的推移而增加。

有什么想法吗？感谢。

修改

我使用grunt-sass的配置目前如下：

module.exports = {
  options: {
    outputStyle: 'nested',
    precision: 3, 
    sourceMap: true
  },
  main: {
    files: {
      'resources/clients-1/css/style.css': ['resources/clients-1/scss/style.scss' ],
      'resources/clients-2/css/style.css': [ 'resources/clients-2/scss/style.scss' ]
    }
  }
};

Answer 1

您可以build the files object dynamically（而不是使用您当前正在使用的Files Object Format），并使用rename属性为每个结果创建新的目标路径{ {1}}个文件。

将.css属性替换为以下内容：

files

<强>解释

在files: [{ expand: true, cwd: 'resources', src: ['**/*.scss'], dest: 'resources/', // <-- Value must match `cwd` value and // include trailing forward slash. ext: '.css', rename: function(dest, src) { var parts = src.split('/'); parts.splice(1, 1, 'css'); return dest + parts.join('/'); } }]函数的主体中，我们首先通过以下行将rename路径拆分为数组：
```
src
```
考虑到var parts = src.split('/');的示例源路径，这将导致将一个数组分配给'resources/clients-1/scss/style.scss'变量，如下所示：
```
parts
```
然后我们在行阅读中使用splice()：
```
['clients-1', 'scss', 'style.scss']
```
这将使用给定值parts.splice(1, 1, 'css');替换索引1处的值（即'scss'）。 'css'数组现在导致：
```
parts
```
最后，通过以下行：
```
['clients-1', 'css', 'style.scss']
```
我们从函数返回return dest + parts.join('/');路径的新String。鉴于前面的示例，dest路径将是：
```
dest
```
由于'resources/clients-1/css/style.css'属性的值为ext，因此grunt会将原.css个扩展名替换为.scss。

注意：

如果您的.css文件夹包含包含{em} 想要为您生成resources文件的.scss个文件的子文件夹我需要使用globbing pattern来否定它们。例如，假设您的.css目录如下所示：

resources

让我们假设您不希望为文件夹. ├── resources │ ├── clients-1 │ │ └── scss │ │ └── style.scss │ ├── clients-2 │ │ └── scss │ │ └── style.scss │ ├── foo │ │ └── scss │ │ └── style.scss │ └── quux │ └── scss │ └── style.scss └── ...和.css中存在的.scss文件生成foo个文件，（即您只想处理文件夹quux和clients-1）。

鉴于这种情况，您需要将上面提供的代码示例中的clients-2属性更改为：

src

Grunt Sass：更改目标路径上的一个文件夹名称

1 个答案: