使用 angular-fullstack 生成器时 Sass 的问题答案

【问题标题】：Problems with Sass when using angular-fullstack generator使用 angular-fullstack 生成器时 Sass 的问题
【发布时间】：2015-10-15 17:42:16
【问题描述】：

我已经使用 Sass 和 Yeoman 的 angular fullstack 生成器建立了一个 web 应用程序。它似乎运行良好，直到我意识到每次 grunt 尝试运行任务时都会输出错误。这是输出：

/Users/rorysmith/.rvm/rubies/ruby-2.2.1/bin/scss --no-cache --update app.scss:app.css
error app.scss (Line 4: File to import not found or unreadable: ../bower_components/bootstrap-sass-official/vendor/assets/fonts/bootstrap.)

Process finished with exit code 1

它指的是app.scss文件中的一行：

@import '../bower_components/bootstrap-sass-official/vendor/assets/fonts/bootstrap'

我将目录更改为在开头包含 ../，因为这是我的 bower_components 所在的位置：

当被注释掉时，同一文件的不同行会出现问题： @import 'modal/modal.scss';

这是完整的app.scss 文件，它只是生成器创建的库存文件：

$icon-font-path: "../bower_components/bootstrap-sass-official/vendor/assets/fonts/bootstrap";
$fa-font-path: "../bower_components/font-awesome/fonts";

@import '../bower_components/bootstrap-sass-official/vendor/assets/fonts/bootstrap';
@import '../bower_components/font-awesome/fonts';

/**
 * App-wide Styles
 */

.browsehappy {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

// Component styles are injected through grunt
// injector
@import 'account/login/login.scss';
@import 'admin/admin.scss';
@import 'create/create.scss';
@import 'main/main.scss';
@import 'modal/modal.scss';
// endinjector

知道到底发生了什么吗？

【问题讨论】：

标签： sass gruntjs yeoman bootstrap-sass angular-fullstack

【解决方案1】：

我遇到了同样的问题，这就是为我“修复”它的方法......

在 Gruntfile 中，找到以下内容：

  // Inject component scss into app.scss
  sass: {
    options: {
      transform: function(filePath) {
        filePath = filePath.replace('/client/app/', '');
        filePath = filePath.replace('/client/components/', '');
        return '@import \'' + filePath + '\';';
      },
      starttag: '// injector',
      endtag: '// endinjector'
    },
    files: {
      '<%= yeoman.client %>/app/app.scss': [
        '<%= yeoman.client %>/{app,components}/**/*.{scss,sass}',
        '!<%= yeoman.client %>/app/app.{scss,sass}'
      ]
    }
  },

将下面这行修改为：

filePath = filePath.replace('/client/components/', '../components/');

现在它应该注入正确的路径。

警告：我真的不知道自己在做什么。

【讨论】：