当 Grunt 从 SCSS 创建 CSS 时，@media -sass-debug-info{filename 出现问题答案

【问题标题】：Issue with @media -sass-debug-info{filename when Grunt creates CSS from SCSS当 Grunt 从 SCSS 创建 CSS 时，@media -sass-debug-info{filename 出现问题
【发布时间】：2015-05-19 14:52:08
【问题描述】：

我正在使用 Grunt 从大量的部分 SCSS 文件中观察和编译我的 CSS。所以当我更新我的任何 SCSS 文件时，手表会生成一个更新的 main.css 文件。这没关系，但我注意到所有类似乎都用以下代码包装，例如

@media -sass-debug-info{filename{font-family:file\:\/\/\/Users\/username\/Projects\/my-gitclone\/projectname\/src\/htdocs\/an\/app\/styles\/utilities\/_display\.scss}line{font-family:\0000354}}
.u-body-noscroll {
  overflow: hidden;
}

我不明白为什么手表会插入此 @media -sass-debug-info{filename{}line{font-family:\0000XXX}}，我认为这可能是由于我的 _fonts.scss 文件中的错误，但这很好，并且 url 值是相对的：

@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/Merriweather.woff2') format('woff2'),
  url('fonts/Merriweather.woff') format('woff'),
  url('fonts/Merriweather.ttf') format('truetype');
}

@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/MerriweatherBold.woff2') format('woff2'),
  url('fonts/MerriweatherBold.woff') format('woff'),
  url('fonts/MerriweatherBold.ttf') format('truetype');
}

我还认为我的 _icon-font.scss 可能是问题的根源，但这是正确的吗？ IDE 或 Grunt 是否可以添加此 @media -sass-debug-info？

我将 Grunt 用于我的手表/任务运行程序并使用 IntelliJ 作为我的 IDE，有人遇到过这个问题吗？

【问题讨论】：

标签： css intellij-idea sass gruntjs grunt-contrib-watch

【解决方案1】：

我想我找到了答案……在我的 Grunt 文件中，我将 debugInfo: false 添加到了 compass.dist 和 compass.server 任务中。

// Compiles Sass to CSS and generates necessary files if requested
        compass: {
            options: {
                sassDir: '<%= yeoman.app %>/styles',
                cssDir: '<%= yeoman.app %>/styles',
                generatedImagesDir: '.tmp/images/generated',
                imagesDir: '<%= yeoman.app %>/images',
                javascriptsDir: '<%= yeoman.app %>/scripts',
                fontsDir: '<%= yeoman.app %>/styles/fonts',
                importPath: './bower_components',
                httpImagesPath: '/images',
                httpGeneratedImagesPath: '/images/generated',
                httpFontsPath: '/styles/fonts',
                relativeAssets: false,
                assetCacheBuster: false,
                raw: 'Sass::Script::Number.precision = 10\n'
            },
            dist: {
                options: {
                    generatedImagesDir: '<%= yeoman.dist %>/images/generated',
                    debugInfo: false
                }
            },
            server: {
                options: {
                    debugInfo: false
                }
            }
        },

【讨论】：