基础grunt / libsass sourcemap在检查时给出错误的路径

Question

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

已安装的基础，凉亭和咕噜声。

项目运行良好，咕噜咕噜的手表。

然后我在Chrome中打开项目 - ＆gt; DevTools。

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

我的所有样式都映射到_visibility.scss，当那些stlye实际上在app.scss中时

我的Gruntfile.js

＆＃13;

＆＃13;

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']);
}

＆＃13;

＆＃13;

＆＃13;

我的配置有问题吗？

Answer 1

它与您的Gruntfile的配置方式有关。在你的sass选项下你有sourceMap: true这会将你编译的css映射回sass partials。如果你改为sourceMap: false，一切都应该按照你期望的方式工作。

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

希望对你有用！

Answer 2

源映射和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等等），否则不太可能有用的答案。