生成源映射错误 - grunt和sass配置

Question

我试图在grunt中使用sass。我已经将ruby、sass和grunt安装到了我的路径中。
它们的版本分别是，

node: 0.10.20
npm: 1.3.11
grunt-cli: 0.1.13
grunt: 0.4.5
sass: 3.4.4

我的package json文件如下，

"private": true,
"devDependencies": {
    "express": "4.x",
    "grunt": "~0.4.1",
    "grunt-contrib-sass": "~0.3.0",
    "grunt-contrib-watch": "~0.4.4" 
}

我的Grunt文件如下：

module.exports = function(grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        sass: {
            dist: {
                files: {
                    'style/style.css' : 'sass/home.scss'
                }
            }
        },
        watch: {
            css: {
                files: '**/*.scss',
                tasks: ['sass']
            }
        }
    });
    grunt.loadNpmTasks('grunt-contrib-sass');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.registerTask('default',['watch']);
}

现在如果我尝试运行 "grunt" 命令，会收到以下错误。有什么帮助吗？

运行：grunt、grunt watch 或 grunt sass

错误：

Running "sass:dist" (sass) task
Error: Error generating source map: couldn't determine public URL for the source
 stylesheet.
         No filename is available so there's nothing for the source map to link
to.
        on line  of standard input
  Use --trace for backtrace.
Warning: Error: Error generating source map: couldn't determine public URL for t
he source stylesheet.
         No filename is available so there's nothing for the source map to link
to.
        on line  of standard input
  Use --trace for backtrace. Use --force to continue.

Aborted due to warnings.

有什么想法吗？

- Hello

Answer 1

看起来您没有安装compass。您可以运行gem install compass。在您的原始示例中，您已经设置了grunt文件以使用compass，这将使您能够访问compass混合和功能。

您的代码现在看起来很好，应该可以工作，但似乎找不到您的文件。下次我坐在电脑旁时，我也会尝试一下。

与此同时，您可以在sass任务上尝试sourcemap: none选项。

更新：

对我来说完全正常。您可以运行tree -I node_modules并发布输出（除非您认为有任何敏感信息），以确保文件放在正确的位置？

我希望它看起来像这样。

.
├── Gruntfile.js
├── package.json
├── sass
│   └── style.scss
└── style
    ├── style.css
    └── style.css.map

第二次更新：

您的软件包看起来比我最新设置中的要老很多。请尝试从头开始或执行以下操作：

安装npm-check-updates。

npm install npm-check-updates 

然后运行以下命令：

• npm-check-updates 会告诉您哪些软件包已过时
• npm-check-updates -u 将更新您的 package.json 中的这些软件包
• npm update 可以更新所有已过时的软件包。

- Stefan Dorunga

---

似乎找不到您的样式表文件。您是否已经创建了它们并且放置在正确的位置？ - Stefan Dorunga

已经更新了答案并提出了建议。我会在电脑面前尝试运行您的示例。 - Stefan Dorunga

嗨。我尝试使用“tree -I node_modules”命令，但它显示一些错误，说“参数太多”。也许我的命令有误。无论如何，树形结构是正确的。但还有一件事，我没有创建“style.css.map”。那是什么？它会自动生成还是我需要手动创建？与您的结构唯一的区别是我没有“style.css.map”。这样做有问题吗？ - Hello

好的，它应该在dist中，就像你的文件JSON一样，options: {sourcemap: 'none'}。我最后一个问题是你的SASS里有什么导入，它是什么样子的？ - Stefan Dorunga

我尝试了一个小例子。所以代码是 $font-stack: Helvetica, sans-serif; $primary-color: #333;body { font: 100% $font-stack; color: $primary-color; } - Hello

Answer 2

更新节点模块有所帮助...

npm-check-updates 可以告诉您哪些软件包已过时 npm-check-updates -u 将在您的 package.json 中更新这些软件包 npm update 以更新所有过时的软件包。

- Nikesha

---

这与现有答案有何不同之处（已经建议更新软件包）？ - cimmanon