Laravel Elixir includePaths 不起作用答案

【问题标题】：Laravel Elixir includePaths not workingLaravel Elixir includePaths 不起作用
【发布时间】：2015-02-10 21:17:22
【问题描述】：

我正在尝试 Laravel Elixir 并希望在 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/']})
});

【问题讨论】：

标签： php laravel bootstrap-sass laravel-elixir

【解决方案1】：

我不确定您是否有理由在 gulpfile 中执行 includePaths，但对于引导程序，您不必这样做。引导程序包含路径已在 /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"
}

但看起来你已经这样做了。

【讨论】：

您的回答确实是针对不同的问题，./vender/bower_components 中的包可能是其他任何东西，而这个问题仍未得到解答。我在包括替代 includePaths 并让它们被识别时遇到了麻烦。

【解决方案2】：

我知道这已经有一个可接受的答案，但我有这样的工作。

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）

【讨论】：

【解决方案3】：

另一种解决方案是使用这一行来编译位于您的供应商文件夹中的 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');

【讨论】：