Question

我使用Yeoman，Bower和Grunt（npm install -g yo grunt-cli bower）设置了一个快速应用程序。我安装了AngularJS生成器（npm install -g generator-angular）并运行yo angular来设置项目目录。最后在安装Bootstrap for Angular（bower install angular-bootstrap --save）。

当我运行grunt server --force时，我发现作为项目样式目录一部分的.scss没有被编译为.css。相反，给出了这个错误：

Syntax error: File to import not found or unreadable: sass-bootstrap/lib/bootstrap.
          Load path: C:/Users/C8M9S/Desktop/myAngular/app/styles
    on line 3 of main.scss

1: $icon-font-path: "/bower_components/sass-bootstrap/fonts/";
2: 
3: @import 'sass-bootstrap/lib/bootstrap';

为什么没有编译的任何想法？

Answer 1

但错误说它在第3行，第3行的代码甚至不使用$ icon-font-path！我有一个类似的问题，解决方案是修改Gruntfile.js配置告诉grunt组件使用'loadPath'参数的位置：

grunt.initConfig({
  sass: {
    dist: {
      options: {
        style: 'expanded',
          loadPath: 'bower_components/foundation/scss'
        },
        files: {
           'public/static/css/main.css': 'app/frontend/scss/foundation.scss'
        }
      }

现在，如果在foundations.scss中，您有以下行： @import“foundation / components / accordion”

它在下面找到手风琴组件：bower_components / foundation / scss / foundation / components / accordion

希望这会有所帮助：）

Answer 2

$icon-font-path: "/bower_components/sass-bootstrap/fonts/";

正在整个文件系统的根目录中查找bower_components文件夹。删除开头的/，找出相关文件路径到sass文件所在的bower components文件夹的内容。像这样：

$icon-font-path: "../../bower_components/sass-bootstrap/fonts/";

Grunt watch无法编译.scss，无法找到sass-bootstrap / lib / bootstrap

2 个答案: