grunt build crashing on cssmin with failed scss import

Question

I have a project that uses the grunt yeoman angular generator and sass.

In my scss file, I have the following lines:

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

Which were automatically generated by my yeoman generator.

In the course of putting the project together, something happened and grunt build is failing on cssmin with:

Running "cssmin:generated" (cssmin) task Warning: Broken @import declaration of "\bootstrap-sass-official/assets/stylesheets/_bootstrap.scss\" Use --force to continue.

Aborted due to warnings.

Below are some relevant sections from my 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
        }
      }
    },

and from my 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 -->

Not quite sure what I need to do to get grunt to find the _bootstrap.scss file and to minify it properly.

score 0 · Answer 1 · edited May 23 '17 at 11:59

I'm assuming that the @import statement you pasted was from your index.html?

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

For some odd reason, you're getting scss statements injected directly into your index.html which should not be happening. What you want to make sure you're doing is compiling all of your scss files into css, and then injecting those files into the index.html. The sass target you set up inside of wiredep is probably causing the sass to get injected. Wiredep is only meant to inject the link and script tags for bower_components, it is not meant to inject sass directly into your index.html. The goal is to compile sass, and then inject the compiled css files into your index.html. You should probably remove these lines inside of wiredep:

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

I ran into a similar issue but found that one of the css files that got injected into the index.html actually contained the @import statement inside:

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

My problem was that the somePackage.css file still contained scss statements and there is no reasonable method for running sass directly in a browser even if you run it as javascript. You could use something like sass.js or less.js but its really not recommended: Is there a SASS.js? Something like LESS.js?. Also, the 'cssmin' task will not minify files that still contain sass statements. The key here is to make sure all sass files are compiled down to css first.

After that is done, make sure that any .css files that are injected into your index.html don't actually contain scss statements. That is the main reason my the cssmin task failed for me, and ultimately caused 'grunt build' and 'grunt serve:dist' to break before it finishes the minification/uglification processes.

grunt build crashing on cssmin with failed scss import

1 Answers1