google-chrome - Grunt 服务器和 scss 源映射 : not serving the scss files (404)

Question

我对 yeoman/grunt/bower 很陌生，在过去的 3 天里，我的大脑开始闻起来像培根。

我已经使用 yeoman Webapp 生成器 (0.4.9) 生成了一个基本的 webapp。

我正在使用 scss 版本的 bootstrap 并且我已经设法使 source mapping 与我的 Chrome Canary 添加 sourcemap: 'true' 在我的 gruntfile

中的 sass/server/options 下

sass: {
        options: {
            includePaths: [
                'bower_components'
            ]
        },
        dist: {
            files: [{
                expand: true,
                cwd: '<%= config.app %>/styles',
                src: ['*.scss'],
                dest: '.tmp/styles',
                ext: '.css'
            }]
        },
        server: {
            files: [{
                expand: true,
                cwd: '<%= config.app %>/styles',
                src: ['*.scss'],
                dest: '.tmp/styles',
                ext: '.css'
            }],
            options: {
                sourceComments: 'map',
                sourcemap: 'true'
            }

        }
    } ...

因此，当我在 Chrome 的样式面板下检查 css 规则时，我正确地获得了指向 bootstrap 的原始 scss 文件的链接。

问题出在我在 app/style/ 中添加的自定义 scss 文件。 在这里我有一个 main.scss 文件，我从那里导入 Bootstrap scss 文件和我的 cusotm scss 文件(仍在 app/styles 下) .

bootstrap scss 文件已正确提供，但找不到我所有的自定义 scss 文件(包括 main.scss)。
当启动 grunt serve 时，Chrome 正在寻找它们(例如)在 http://localhost:9000/app/styles/main.scss 生成一个 404 错误。这些文件实际上在 http://localhost:9000/styles/main.scss 中正确提供。

问题:
考虑到我非常困惑的新知识/任务的数量，这是怎么回事？这个问题是来自服务器、源映射、autoprefixer、livereload 还是其他？

Answer 1

要解决此问题，请观看此视频:http://web-design-weekly.com/2014/07/23/sass-source-maps-chrome/

简而言之:您必须将本地 scss 文件夹(在“源”选项卡中将文件夹添加到工作区)映射到虚拟服务器 scss 文件。然后您可以直接从 Chrome 编辑它:-)