Question

我很喜欢自耕农 / 咕噜 / 凉亭，在过去的3天里，我的大脑开始闻起来像培根。

我使用 yeoman Webapp generator（0.4.9）生成了一个基本的webapp。

我正在使用 scss 版本的bootstrap，我设法使源映射与我的Chrome Canary一起在sass / server下添加sourcemap: 'true'我的 gruntfile

中的/ 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下）。

在找不到所有自定义scss文件时（包括main.scss），正确提供了bootstrap scss文件。
启动grunt serve时，Chrome会在http://localhost:9000/app/styles/main.scss查找（例如）生成 404 错误。这些文件实际上是在http://localhost:9000/styles/main.scss正确提供的。

问题：
考虑到新知识/任务的数量，我非常困惑，发生了什么？这个问题是来自服务器，源地图，自动修复程序，livereload还是还有什么？

Answer 1

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

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

Grunt服务器和scss源映射：不提供scss文件（404）

1 个答案: