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

Question

我正在使用 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:[=12=]00354}}
.u-body-noscroll {
  overflow: hidden;
}

我不明白为什么手表要插入这个 @media -sass-debug-info{filename{}line{font-family:[=14=]00XXX}}，我认为这可能是由于我的 _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 吗？

我的 watch/task-runner 使用 Grunt，IDE 使用 IntelliJ，有人遇到过这个问题吗？

Answer 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
                }
            }
        },

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

Issue with @media -sass-debug-info{filename when Grunt creates CSS from SCSS

css

sass

intellij-idea

gruntjs

grunt-contrib-watch