Foundation grunt/libsass sourcemap 在检查时给出错误的路径答案

【问题标题】：Foundation grunt/libsass sourcemap give wrong path when inspectedFoundation grunt/libsass sourcemap 在检查时给出错误的路径
【发布时间】：2015-03-27 22:59:08
【问题描述】：

我刚刚设置了一个新项目来测试 libsass。

安装了 Foundation、bower 和 grunt。

项目在 grunt watch 下运行良好。

然后我在 Chrome 中打开项目 -->DevTools。

我正在检查默认app.scss生成的css，

我的所有样式都映射到 _visibility.scss，而这些样式实际上在 app.scss 中

我的 Gruntfile.js

module.exports = function(grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),

    sass: {
      options: {
        includePaths: ['bower_components/foundation/scss'],
        sourceMap: true,
        debugInfo: true
      },
      dist: {
        options: {
          outputStyle: 'nested'
        },
        files: {
          'css/app.css': 'scss/app.scss'
        }        
      }
    },

    watch: {
      grunt: { files: ['Gruntfile.js'] },

      sass: {
        files: 'scss/**/*.scss',
        tasks: ['sass']
      }
    }
  });

  grunt.loadNpmTasks('grunt-sass');
  grunt.loadNpmTasks('grunt-contrib-watch');

  grunt.registerTask('build', ['sass']);
  grunt.registerTask('default', ['build','watch']);
}

我的配置有问题？

【问题讨论】：

标签： sass gruntjs npm zurb-foundation libsass

【解决方案1】：

sourcemaps 和 libsass、node-sass 或 grunt-sass 似乎存在问题，具体取决于您关注的线程：

https://github.com/sass/node-sass/issues/619

https://github.com/sindresorhus/grunt-sass/pull/146

您可以尝试按照以下方式降级您的 CLI 工具：

https://github.com/zurb/foundation/issues/6129

恕我直言，这表明 Web 开发 CLI 工具已经变得混乱，人们花在工作上的时间比实际工作要多。

一般来说，当提出这样的问题时，确实需要准确指定当前正在运行的所有 CLI 工具（即 grunt、sass、lib-sass 等）的哪个版本，否则不太可能提供有用的答案。

【讨论】：

【解决方案2】：

这与 Gruntfile 的配置方式有关。在您的 sass 选项下，您有 sourceMap: true 这是将您编译的 css 映射回 sass 部分。如果您将其更改为sourceMap: false，一切都应该按照您的预期进行。

sass: {
      options: {
        includePaths: ['bower_components/foundation/scss'],
        sourceMap: false,
        debugInfo: true
},

希望对你有用！

【讨论】：

这很有效，谢谢。现在它指向正确的文件，但在错误的行。它说我的样式在第 1 行而不是第 42 行，但我可以忍受，在文件中搜索将涵盖我猜的问题