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

Question

I'm trying to combine few SASS files and CSS files into a single CSS file in the Laravel mix but I could not find how.

here is a sample laravel mix that I'm trying to use which return errors:

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. You can import the CSS file on the sass file, then compile only the main sass file if it's feasible. found this which may help you: https://stackoverflow.com/questions/7111610/import-regular-css-file-in-scss-file#:~:text=It%20is%20now%20possible%20to,will%20import%20your%20file%20directly .

2. You can combine CSS files. here is an example I have used. maybe you can compile sass to CSS and later combine using this method?

please check the sample

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

for the completeness of the answer same kind of approach can be used to js files as follows,

// 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');

use this approach on your webpack.mix.js