0

我有一个使用 grunt yeoman 角度生成器和 sass 的项目。

在我的 scss 文件中，我有以下几行：

// bower:scss
@import "bootstrap-sass-official/assets/stylesheets/_bootstrap.scss";
// endbower

这是由我的 yeoman 生成器自动生成的。

在将项目组合在一起的过程中，发生了一些事情，并且 grunt build 在 cssmin 上失败了：

运行“cssmin：生成”（cssmin）任务警告：“\bootstrap-sass-official/assets/stylesheets/_bootstrap.scss\”的@import声明损坏使用--force继续。

由于警告而中止。

以下是我的 Gruntfile 中的一些相关部分：

// Automatically inject Bower components into the app
    wiredep: {
      app: {
        src: ['<%= yeoman.app %>/index.html'],
        ignorePath:  /\.\.\//
      },
      test: {
        devDependencies: true,
        src: '<%= karma.unit.configFile %>',
        ignorePath:  /\.\.\//,
        fileTypes:{
          js: {
            block: /(([\s\t]*)\/{2}\s*?bower:\s*?(\S*))(\n|\r|.)*?(\/{2}\s*endbower)/gi,
              detect: {
                js: /'(.*\.js)'/gi
              },
              replace: {
                js: '\'{{filePath}}\','
              }
            }
          }
      },
      sass: {
        src: ['<%= yeoman.app %>/styles/{,*/}*.{scss,sass}'],
        ignorePath: /(\.\.\/){1,2}bower_components\//
      }
    },

    // 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: {
          sourcemap: true
        }
      }
    },

并从我的 index.html

 <!-- build:css(.) styles/vendor.css -->
  <!-- bower:css -->
  <!-- endbower -->
  <!-- endbuild -->
  <!-- build:css({.tmp,app}) styles/styles.css -->
  <link rel="stylesheet" href="styles/main.css">
  <link rel="stylesheet" href="styles/clean-blog.css">
  <!-- endbuild -->
  <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
  <link href='http://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
  <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>

  <!-- endbuild -->

不太确定我需要做什么才能找到_bootstrap.scss文件并正确缩小它。

4

1 回答 1

0

我假设您粘贴的 @import 语句来自您的 index.html？

// bower:scss
@import "bootstrap-sass-official/assets/stylesheets/_bootstrap.scss";
// endbower

出于某种奇怪的原因，您将 scss 语句直接注入到您的 index.html 中，这不应该发生。您要确保将所有 scss 文件编译成 css，然后将这些文件注入 index.html。您在wiredep 中设置的sass 目标可能会导致sass 被注入。Wiredep 仅用于为 bower_components 注入链接和脚本标签，而不是将 sass 直接注入到您的 index.html 中。目标是编译 sass，然后将编译后的 css 文件注入到您的 index.html 中。您可能应该在wiredep中删除这些行：

sass: {
  src: ['<%= yeoman.app %>/styles/{,*/}*.{scss,sass}'],
  ignorePath: /(\.\.\/){1,2}bower_components\//
}

我遇到了类似的问题，但发现注入 index.html 的 css 文件之一实际上包含 @import 语句：

<!-- bower:css -->
  <link rel="stylesheet" href="bower_components/somePackage/somePackage.css" />
<!-- endbower --><!-- build:css({.tmp,app}) styles/styles.css -->

我的问题是 somePackage.css 文件仍然包含 scss 语句，并且没有合理的方法可以直接在浏览器中运行 sass，即使您将其作为 javascript 运行也是如此。您可以使用 sass.js 或 less.js 之类的东西，但实际上不推荐：Is there a SASS.js? 像 LESS.js 之类的东西？. 此外，“cssmin”任务不会缩小仍包含 sass 语句的文件。 这里的关键是确保首先将所有 sass 文件编译为 css。

完成后，确保注入到 index.html 中的任何 .css 文件实际上不包含 scss 语句。这是我的 cssmin 任务失败的主要原因，并最终导致“grunt build”和“grunt serve:dist”在完成缩小/丑化过程之前中断。

于 2016-02-05T22:23:37.290 回答