Laravel Elixir includePaths无效

Question

我正在尝试Laravel Elixir，并希望在includePaths中包含bootstrap，但它不起作用。 我哪里错了？

var paths = {
    'bootstrap': './vendor/bower_components/bootstrap-sass-official/assets/'
}

elixir(function(mix) {
    mix.sass("style.scss", 'public/assets/css/', {includePaths: [paths.bootstrap + 'stylesheets/']})
});

Answer 1

我不确定你是否有理由想在你的gulpfile中做includePaths，但是对于bootstrap你不必这样做。 bootstrap include path已经在/ 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"
}

但看起来你已经做到了。

Answer 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 ）

Answer 3

另一个解决方案是使用此行来编译位于vendor文件夹中的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');