使用 laravel 5.2 Elixir 和 NPM 的 Font Awesome、Vue 和 Bootstrap答案

【问题标题】：Font Awesome, Vue and Bootstrap using laravel 5.2 Elixir and NPM使用 laravel 5.2 Elixir 和 NPM 的 Font Awesome、Vue 和 Bootstrap
【发布时间】：2016-08-06 18:59:19
【问题描述】：

我一直在尝试将 bootstrap 和 fontawesome 合并到我的项目中，一切似乎都运行良好，因为首先 app.css 文件是空的。

运行 gulp 后，我收到以下错误：

Sass 编译失败：resources/assets/sass/app.scss 错误：找不到或无法读取要导入的文件：/node_modules/bootstrap-sass/assets/stylesheets/bootstrap 父样式表：/home/vagrant/Code/Eventer /resources/assets/sass/app.scss 在 resources/assets/sass/app.scss 的第 4 行

@import '/node_modules/bootstrap-sass/assets/stylesheets/bootstrap';

这就是我的 gulp 文件的样子：

var elixir = require('laravel-elixir');

require('laravel-elixir-vueify');

var paths = { 
  'jquery': 'node_modules/jquery/', 
  'bootstrap': 'node_modules/bootstrap-sass/assets/', 
  'fontawesome': 'node_modules/font-awesome/'

};

elixir(function (mix) { 
   mix.sass('.scss', 'public/css/', {includePaths:   [paths.bootstrap +   'stylesheets', paths.fontawesome + 'scss']}) 
      .copy(paths.bootstrap + 'fonts/bootstrap/', 'public/fonts/bootstrap') 
      .copy(paths.fontawesome + 'fonts/', 'public/fonts/fontawesome') 
      .scripts([ 
         paths.jquery + "dist/jquery.js", 
         paths.bootstrap + "javascripts/bootstrap.js", 
       './resources/javascripts//.js', ], 
       'public/js/main.js', './') 
       .browserify('main.js') 
       .version([  
        'css/app.css', 
         'js/main.js'
       ]) 

});

这是我的 package.json 文件：

{ 
  "private": true, "scripts": { 
  "prod": "gulp --production", 
  "dev": "gulp  watch" }, 
  "devDependencies": { 
  "gulp": "^3.9.1", "laravel-elixir": "^5.0.0" },    
  "dependencies": { 
  "vue": "^1.0.26", 
  "vue-resource": "^0.9.3", 
  "laravel-elixir-vueify": "^1.0.3", 
  "stylus": "^0.54.5", "jquery": "^3.1.0", 
  "font-awesome": "^4.6.3", "bootstrap-sass": "^3.3.7"
 }
}

这是我的 app.scss 文件

@import "components/Alert"; 
$icon-font-path: 'node_modules/bootstrap- sass/assets/fonts/bootstrap'; 
$fa-font-path: 'node_modules/font-awesome/fonts';        
@import '/node_modules/bootstrap-sass/assets/stylesheets/bootstrap'; 
@import '/node_modules/font-awesome/scss';

【问题讨论】：

标签： twitter-bootstrap-3 gulp laravel-5.2 font-awesome laravel-elixir

【解决方案1】：

本质上 app.scss 文件导入错误，无法访问这些文件，只能像这样直接导入它们：

@import "components/Alert";
$icon-font-path: '../../../vendor/bower_components/bootstrap-sass-official/assets/fonts';
$fa-font-path:   '../../../vendor/bower_components/fontawesome/fonts/';
@import '../../../vendor/bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap';
@import '../../../vendor/bower_components/fontawesome/scss/font-awesome';

【讨论】：