Laravel Elixir includePaths 不工作
Laravel Elixir includePaths not working
我正在尝试 Laravel Elixir 并希望将 bootstrap 包含在 includePaths 中,但它不起作用。我哪里错了?
var paths = {
'bootstrap': './vendor/bower_components/bootstrap-sass-official/assets/'
}
elixir(function(mix) {
mix.sass("style.scss", 'public/assets/css/', {includePaths: [paths.bootstrap + 'stylesheets/']})
});
我不确定您是否有理由要在您的 gulpfile 中执行 includePaths,但是对于 bootstrap 您不必这样做。 bootstrap 包含路径已在 /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)'
});
});
所以你所要做的就是在你的 gulpfile 中:
elixir(function(mix) {
mix.sass("style.scss");
});
然后在你的 style.scss:
@import "bootstrap";
我认为您必须将 .bowerrc 文件设置为:
{
"directory": "vendor/bower_components"
}
但看起来你已经这样做了。
另一种解决方案是使用此行来编译 sass 或更少的位于供应商文件夹中的文件:
mix.less("../../../vendor/twbs/bootstrap/less/bootstrap.less");
注意:我使用 "composer require twbs/boostrap" 来获取完整的包。不需要凉亭。
编辑:
我将编译后的css文件输出到资源文件夹,以便与其他css文件合并:
mix.less("../../../vendor/twbs/bootstrap/less/bootstrap.less", 'resources/css');
mix.styles([
"bootstrap.css"
], 'public/css/app.css');
我知道这已经有一个可接受的答案,但我有类似的东西可以工作。
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");
});
其中 bower_components
安装在 laravel 根目录中。
(来自:https://laracasts.com/discuss/channels/requests/gulpfile-elixir-merge-scss-includepaths)
我正在尝试 Laravel Elixir 并希望将 bootstrap 包含在 includePaths 中,但它不起作用。我哪里错了?
var paths = {
'bootstrap': './vendor/bower_components/bootstrap-sass-official/assets/'
}
elixir(function(mix) {
mix.sass("style.scss", 'public/assets/css/', {includePaths: [paths.bootstrap + 'stylesheets/']})
});
我不确定您是否有理由要在您的 gulpfile 中执行 includePaths,但是对于 bootstrap 您不必这样做。 bootstrap 包含路径已在 /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)'
});
});
所以你所要做的就是在你的 gulpfile 中:
elixir(function(mix) {
mix.sass("style.scss");
});
然后在你的 style.scss:
@import "bootstrap";
我认为您必须将 .bowerrc 文件设置为:
{
"directory": "vendor/bower_components"
}
但看起来你已经这样做了。
另一种解决方案是使用此行来编译 sass 或更少的位于供应商文件夹中的文件:
mix.less("../../../vendor/twbs/bootstrap/less/bootstrap.less");
注意:我使用 "composer require twbs/boostrap" 来获取完整的包。不需要凉亭。
编辑:
我将编译后的css文件输出到资源文件夹,以便与其他css文件合并:
mix.less("../../../vendor/twbs/bootstrap/less/bootstrap.less", 'resources/css');
mix.styles([
"bootstrap.css"
], 'public/css/app.css');
我知道这已经有一个可接受的答案,但我有类似的东西可以工作。
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");
});
其中 bower_components
安装在 laravel 根目录中。
(来自:https://laracasts.com/discuss/channels/requests/gulpfile-elixir-merge-scss-includepaths)