Javascript 如何使Grunt和PostCSS处理与其源文件位置相关的CSS源映射

我试图使Grunt正确地生成CSS文件相对于其源文件位置的源映射

看看这个

grunfile.js

：

module.exports = function (grunt) {
    grunt.initConfig({
        postcss: {
            options: {
                processors: [
                    require('postcss-media-query-optimizer')(),
                    require('postcss-gap-properties')(),
                    require('autoprefixer')({grid: 'autoplace'}),
                    require('cssnano')() // minify the result
                ],
                map: {
                    // prev: '**/*.css.map',
                    inline: false // save all sourcemaps as separate files...
                    // annotation: 'assets/css/' // ...to the specified directory
                }
            },
            dist: {
                files: [
                    {
                        expand: true,
                        src: ['*.css', 'assets/css/*.css', '!**/*.min.css'],
                        ext: '.min.css',
                        extDot: 'first'
                    }
                ]
            }
        },
        watch: {
            styles: {
                files: ['**/*.css'],
                tasks: ['postcss']
            }
        }
    });
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-postcss');
};

我有两个SCSS文件：一个在项目根目录中，一个在

assets/css/

目录中

我使用的是PHPStorm IDE，它有一个很好的工具，名为

文件查看器

。我将其配置为在更改时将每个SCSS文件处理为CSS。它还将在单独的文件中生成源映射。所有生成的文件都显示在与其源文件相同的目录中

当我想用postss处理CSS时，问题就出现了。我希望避免将源映射包含在与已处理的

*.css

或

*.min.css

相同的文件中。使用上面列出的

Gruntfile.js

，成功地在源附近生成所有源映射。然而，这让我们看到了这样一种情况：在浏览器中打开DevTools时，会看到一个

*.css

文件作为源文件，而不是

*.scss

因此PostCSS足够智能，因此它引入了一个

map.prev

选项（请参阅和），用于指定包含从上一个处理步骤生成的源映射的文件（在我的例子中是-

*.scss

到

*.css

）。但是，我不知道如何正确指定此选项，因此它需要一个适当的

*.css.map

文件，该文件相对于它的源路径

它现在如何处理上面指定的

grunfile.js

——它正确地从项目根目录中获取

*.css.map

文件，但忽略

资产/css/

目录中的

*.css.map

文件

我已经阅读了几乎每一个Grunt文档页面和StackOverflow问题，它们可能与这种情况有关，但也许我遗漏了一些东西

也许我可以用另一种方式将

*.scss

转换为

*.min.css

，这样不仅解决了这个问题，而且我不会生成未使用的（用于生产的）中间

*.css

和

*.css.map

文件，并直接将

*.scss

转换为

*.min.css

和

*.min.css.map

我知道我可以移动我的源文件，使它们都在同一个文件夹中，这确实有帮助。但我认为应该有一个更干净的方法。除此之外，所有可能的答案都被接受，包括将SCSS代码编译成后处理CSS的新方法，如果它确实有助于解决主要问题的话