Twitter bootstrap 3 使用laravel 5.2 Elixir和NPM的字体、Vue和Bootstrap
我一直在尝试将bootstrap和fontsawesome合并到我的项目中,所有这些看起来都很好,因为首先app.css文件是空的 运行gulp后,我收到以下错误: Sass编译失败:resources/assets/Sass/app.scss错误:要导入的文件找不到或不可读:/node_模块/bootstrap Sass/assets/stylesheets/bootstrap父样式表:/home/vagrant/Code/Eventer/resources/assets/Sass/app.scss,位于resources/assets/Sass/app.scss的第4行 @导入“/node_modules/bootstrap sass/assets/stylesheets/bootstrap” 我的吞咽文件是这样的:Twitter bootstrap 3 使用laravel 5.2 Elixir和NPM的字体、Vue和Bootstrap,twitter-bootstrap-3,gulp,laravel-5.2,font-awesome,laravel-elixir,Twitter Bootstrap 3,Gulp,Laravel 5.2,Font Awesome,Laravel Elixir,我一直在尝试将bootstrap和fontsawesome合并到我的项目中,所有这些看起来都很好,因为首先app.css文件是空的 运行gulp后,我收到以下错误: Sass编译失败:resources/assets/Sass/app.scss错误:要导入的文件找不到或不可读:/node_模块/bootstrap Sass/assets/stylesheets/bootstrap父样式表:/home/vagrant/Code/Eventer/resources/assets/Sass/app.s
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';
本质上,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';