如何在 laravel mix 中将 SASS/SCSS 文件和 CSS 文件合并为一个 CSS 文件？答案

【问题标题】：How to combine SASS/SCSS files and CSS files into a single CSS file in laravel mix?如何在 laravel mix 中将 SASS/SCSS 文件和 CSS 文件合并为一个 CSS 文件？
【发布时间】：2021-01-24 02:19:40
【问题描述】：

我正在尝试将几个 SASS 文件和 CSS 文件合并到 Laravel 组合中的单个 CSS 文件中，但我找不到方法。

这是我尝试使用的示例 laravel mix，它返回错误：

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/scss/app.scss', 'public/css')
    .styles('resources/css/app.css', 'public/css');

【问题讨论】：

尝试发布错误。
显然，不可能将 SASS 文件和 CSS 直接组合成一个 CSS，因为一个会覆盖另一个。猜猜最好的解决方案是将所有 SASS 编译到一个文件中，并将所有 CSS 合并到一个单独的文件中，然后将它们组合在一起。

标签： php css laravel webpack laravel-mix

【解决方案1】：

您可以在 sass 文件上导入 CSS 文件，然后在可行的情况下仅编译主 sass 文件。发现这可能对您有帮助：https://*.com/questions/7111610/import-regular-css-file-in-scss-file#:~:text=It%20is%20now%20possible%20to,will%20import%20your%20file%20directly.
您可以合并 CSS 文件。这是我用过的一个例子。也许您可以将 sass 编译为 CSS，然后使用此方法进行组合？

请检查示例

//combine CSS    
    mix.styles([
        'resources/css/open-iconic-bootstrap.min.css',
        'resources/css/animate.css',
        'resources/css/bootstrap-datepicker.css',
    ], 'public/css/essentials.css');

为了回答的完整性，可以对js文件使用相同的方法如下，

// combine required js files
mix.combine([
        'resources/js/vendors/jquery-migrate.min.js',
        'resources/js/vendors/jquery.easing.1.3.js',
        'resources/js/vendors/bootstrap-datepicker.js',
        'resources/js/vendors/scrollax.min.js'
    ], 'public/js/essentials.js');

在你的 webpack.mix.js 上使用这种方法

【讨论】：

显然不可能将 SASS 文件和 CSS 直接组合成一个 CSS，因为一个会覆盖另一个。猜猜最好的解决方案是将所有 SASS 编译到一个文件中，并将所有 CSS 合并到一个单独的文件中，然后将它们组合在一起。