使用 Laravel Elixir 将 Sass 和纯 CSS 合并到一个文件中

Question

如何将纯 CSS 和 Sass 文件与 Laravel Elixir 合并？如果我运行下面的代码，那么 public/CSS/ 目录中会生成两个文件 "all.css" 和 "app.css"。但是，我只想生成一个 CSS 文件，即 all.css。你们知道什么技巧吗？

elixir(function (mix) {
    mix.sass([
            'app.scss'
        ])
        .styles([
            'owl.carousel.css'
        ]);
})

Answer 1

我通常这样做。目录结构：

/public
    /css 
        all.css
/resources
    /css
        app.css
    /sass
        app.scss

代码应如下所示：

elixir(function (mix) {
    mix.sass([
        'app.sass'
    ], 'resources/assets/css/custom.css')
    .styles([
        '/resources/assets/css/app.css',
        '/resources/assets/css/custom.css',
    ], 'public/css/all.css', __dirname);
})

这将首先在 /resources/assets/css/custom.css 中创建 custom.css 文件，然后此文件夹中的所有 css 文件将合并到位于 /public/css.

的一个文件中

Answer 2

可能不像分隔目录那样干净，但是 SASS 文件会编译成 CSS 文件，因此理论上您可以将普通的 css 文件传递到 elixir 混合器中:

mix.sass(['app.scss', 'jumbotron-narrow.scss', 'datepicker_standalone3.css']);

最终结果是相应 public 目录中的单个 app.css 文件。

使用 Laravel Elixir 将 Sass 和纯 CSS 合并到一个文件中

Combine Sass and plain CSS into one file with Laravel Elixir

css

php

gulp

laravel-elixir

laravel-5.1