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

Question

我刚刚设置了一个新项目来测试 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']);
}

我的配置有问题吗？

Answer 1

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

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

希望对你有用！

Answer 2

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 等等）当前是哪个版本运行当提出这样的问题时，否则不太可能有有用的答案。

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

Foundation grunt/libsass sourcemap give wrong path when inspected

sass

npm

zurb-foundation

gruntjs

libsass