I'm trying Laravel Elixir and want to include bootstrap with includePaths but it does not work. Where am I going wrong?
var paths = {
'bootstrap': './vendor/bower_components/bootstrap-sass-official/assets/'
}
elixir(function(mix) {
mix.sass("style.scss", 'public/assets/css/', {includePaths: [paths.bootstrap + 'stylesheets/']})
});
I'm not sure if there is a reason that you want to do includePaths in your gulpfile, but for bootstrap you don't have to. The bootstrap include path is already configured out of the box in /node_modules/laravel-elixir/ingredients:
elixir.extend('sass', function(src, output, options) {
options = _.extend({
outputStyle: inProduction ? 'compressed' : 'nested',
includePaths: [elixir.config.bowerDir + "/bootstrap-sass-official/assets/stylesheets"]
}, options);
return compile({
compiler: 'Sass',
pluginName: 'sass',
pluginOptions: options,
src: src,
output: output,
search: '**/*.+(sass|scss)'
});
});
So all you should have to do is, in your gulpfile:
elixir(function(mix) {
mix.sass("style.scss");
});
And then in your style.scss:
@import "bootstrap";
I think you have to set your .bowerrc file to:
{
"directory": "vendor/bower_components"
}
but it looks like you have already done that.
I know this already has an accepted answer but I got something like this to work.
var paths = {
'bootstrap': '/bower_components/bootstrap-sass/assets/',
}
elixir(function (mix) {
mix.sass('app.scss', 'public/css', {
includePaths: [
__dirname + paths.bootstrap + 'stylesheets/'
]
});
mix.version("css/app.css");
});
Where bower_components
is installed in the laravel root dir.
(From: https://laracasts.com/discuss/channels/requests/gulpfile-elixir-merge-scss-includepaths )
Another solution is using this line to compile sass or less files sitting in your vendor folder:
mix.less("../../../vendor/twbs/bootstrap/less/bootstrap.less");
Note: I used "composer require twbs/boostrap" to get the complete package. No bower needed.
Edit:
I output the compiled css file to the resource folder to combine it with other css files:
mix.less("../../../vendor/twbs/bootstrap/less/bootstrap.less", 'resources/css');
mix.styles([
"bootstrap.css"
], 'public/css/app.css');
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.