grunt構建崩潰與cssmin失敗scss導入

Question

我有一個項目，使用grunt yeoman角發生器和sass。

在我的SCSS文件，我有以下行：

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

被我自耕農發電機自動生成的哪個。

在把項目一起的過程中，發生了一件事咕嚕編譯失敗的cssmin有：

運行「cssmin：生成」（cssmin）任務警告：破碎的@import 聲明 「 \ bootstrap-sass-official/assets/stylesheets/_bootstrap.scss \「使用 --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文件並將其正確縮小。

Answer 1

我假設你粘貼的@import語句來自你的index.html？

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

對於一些奇怪的原因，你要直接注入到您的index.html這不應該發生SCSS語句。你想確保你正在做的是將所有的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? Something like LESS.js?。此外，'cssmin'任務不會縮小仍包含sass語句的文件。這裏的關鍵是確保所有的sass文件都先編譯成css。

完成之後，請確保注入到index.html中的任何.css文件實際上不包含scss語句。這是我的cssmin任務失敗的主要原因，並最終導致'grunt build'和'grunt serve：dist'在完成縮小/ uglification過程之前打破。