html - -sass-debug-info 在我的 css

Question

我正在使用 css 编写代码，我发现每个类都写在它之前

@media -sass-debug-info{filename{font-family:file\:\/\/C\:\/www\/w-balls-html\/html_source\/lib\/_master\.scss}line{font-family:\00003640}} 

我在saas的文档中找到了一些关于它的东西 - ({#to_s => #to_s}) 调试信息

 A hash that will be associated with this rule in the CSS document if the :debug_info option is enabled. This data is used by e.g. the FireSass Firebug extension.

 Returns:({#to_s => #to_s}) [debug-info-documentation][1]

但不知道如何调试它或知道如何转换为普通的@media

@media all and (max-width: 699px) and (min-width: 520px))

Answer 1

如果您使用 Grunt 来运行您的应用程序，您可以编辑 Gruntfile.js 文件。您正在寻找指南针部分。我在第 175 行附近找到了它。在该部分中，您要将 Server debugInfo 修改为 false。

// Compiles Sass to CSS and generates necessary files if requested
compass: {
  options: {
    sassDir: '<%= yeoman.app %>/styles',
    cssDir: '.tmp/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'
    }
  },
  server: {
    options: {
      debugInfo: false
    }
  }
},

通过将选项更改为 false，您将不会在文件中获得调试信息。我建议您在开发过程中保留调试信息。当网站完成并准备好生产时，然后删除调试信息。

最后，这不会从 CSS 文件中删除注释。您可能会注意到 Compass 在每个选择器的开头插入了一个位置注释。 (见下文)

/* line 19, ../../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/_normalize.scss */
body { margin: 0; }

要删除它，您需要使用 Minification。 Grunt 也可以解决这个问题。您需要确保配置了 Gruntfile.js。 (我发现我的每行之前都用//注释掉了。我不得不删除那些行)之后就运行

grunt cssmin

这 2 个步骤将 475 KB 的 CSS 文件缩小到 110 KB。

希望这对您有所帮助!