1

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

我的配置有问题吗？

4

2 回答 2

1

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

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

希望对你有用！

于 2015-01-29T14:47:03.027 回答
0

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 等）的哪个版本，否则不太可能提供有用的答案。

于 2015-02-06T13:20:18.497 回答