Сбой сборки grunt на cssmin из-за неудачного импорта scss

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

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

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

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

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

Запуск задачи «cssmin:generated» (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 -->

Не совсем уверен, что мне нужно сделать, чтобы заставить grunt найти файл _bootstrap.scss и правильно его минимизировать.


gruntjs yeoman yeoman-generator-angular grunt-contrib-cssmin grunt-wiredep
person mikesol    schedule 07.10.2015    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я предполагаю, что вставленный вами оператор @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 предназначен только для внедрения тегов ссылок и скриптов для 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 потерпела неудачу для меня и в конечном итоге привела к поломке «ворчания сборки» и «ворчания подачи: дистрибутива» до того, как он завершит процессы минимизации/угляции.

person Jameson Gamble    schedule 05.02.2016