如何将 SASS/SCSS 文件和 CSS 文件组合成一个 laravel 组合中的单个 CSS 文件？

Question

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

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

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

Answer 1

1. 您可以在 sass 文件上导入 CSS 文件，如果可行，则只编译主要的 sass 文件。 发现这可能对你有帮助： https://stackoverflow.com/questions/7111610/import-regular-css-file-in-scss-file#:~:text=It%20is%20now%20possible%20to,will% 20import%20your%20file%20directly 。

2. 您可以合并 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 上使用这种方法