Сбой grunt на cssmin при сбое импорта scss

Question

У меня есть проект, который использует ворчливый йоменский угловой генератор и sass.

В моем файле scss у меня есть следующие строки:

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

Которые были автоматически сгенерированы моим йоменским генератором.

В процессе сборки проекта что-то случилось, и сборка grunt не удалась на cssmin с:

Выполнение задачи "cssmin:generate" (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

По какой-то странной причине вы получаете инструкции scss, вставленные непосредственно в ваш index.html, чего не должно быть. То, что вы хотите убедиться, что вы делаете, это скомпилировать все ваши файлы scss в css, а затем вставить эти файлы в index.html. Цель sass, которую вы установили внутри wiredep, вероятно, вызывает sass для инъекции. Wiredep предназначен только для вставки тегов link и script для bower_components, он не предназначен для внедрения sass непосредственно в ваш index.html. Цель состоит в том, чтобы скомпилировать sass, а затем внедрить скомпилированные CSS-файлы в ваш index.html. Вы, вероятно, должны удалить эти строки внутри wiredep:

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

Я столкнулся с подобной проблемой, но обнаружил, что один из файлов css, который был вставлен в index.html, на самом деле содержал оператор @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, но это действительно не рекомендуется: есть ли SASS.js? Что-то вроде LESS.js?, Кроме того, задача 'cssmin' не будет минимизировать файлы, которые все еще содержат операторы sass. Ключевым моментом здесь является убедиться, что все sass-файлы сначала компилируются в css.

После того, как это будет сделано, убедитесь, что любые файлы.css, которые вставляются в ваш index.html, на самом деле не содержат операторов scss. Это главная причина, по которой моя задача cssmin провалилась и в конечном итоге привела к разрыву "grunt build" и "grunt serve:dist" до завершения процессов минификации / углификации.