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

【问题标题】：Combine Sass and plain CSS into one file with Laravel Elixir使用 Laravel Elixir 将 Sass 和纯 CSS 合并到一个文件中
【发布时间】：2015-12-12 16:43:47
【问题描述】：

如何将纯 CSS 和 Sass 文件与 Laravel Elixir 结合起来？如果我运行以下代码，则会在 public/CSS/ 目录中生成两个文件“all.css”和“app.css”。但是，我只想生成一个 CSS 文件，即all.css。你们知道有什么技巧吗？

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

【问题讨论】：

标签： php css gulp laravel-5.1 laravel-elixir

【解决方案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.

【讨论】：

在调试模式下这个有问题。因为 elixir 会创建源映射，所以它会导致 custom.css.map 出现 404 网络错误，因为它不存在于公共路径中。禁用源映射还会阻止您在本地环境中进行调试。我搜索了一种仅为 Sass 禁用源映射的方法，但没有运气。
嗨，如果您的 css 之一位于 node_modules 文件夹中，该怎么做？要给出的路径是什么？

【解决方案2】：

可能没有分离目录那么干净，但是一个 SASS 文件编译成一个 CSS 文件，所以理论上你可以将一个普通的 css 文件传递给 elixir 混合器：

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

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

【讨论】：

如果你尝试它，这将抛出错误，抱怨缺少 sass src 参数。不工作。
为我工作mix.sass(['app.scss', 'libs/*.css']); 也可以！