CODEWITHSUNDEEP
csslaravelwebpacksasslaravel-mix
Abdellah Ramadan
Abdellah Ramadan

Reputation: 365

How to avoid Laravel Mix overriding app.css

The content of style.css gets overridden eahc time I run npm run dev This is my webpack file

let mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

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

 mix.styles(['resources/assets/style.css'], 'public/css/app.css');

Any way to append the css and not override it?

Upvotes: 0

Views: 1872

Answers (2)

W Kristianto
W Kristianto

Reputation: 9303

You don't need to change your webpack file.

In addition to importing .sass and .scss files, Sass can import plain old .css files. The only rule is that the import must not explicitly include the .css extension, because that’s used to indicate a plain CSS @import.

Webpack

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

Sass (resources/assets/sass/app.scss)

...

@import '../style.css';

Upvotes: 1

Somangshu Goswami
Somangshu Goswami

Reputation: 1138

app is the default name taken by the webpack

So either change .sass('resources/assets/sass/app.scss', 'public/css') -> .sass('resources/assets/sass/app.scss', 'public/css/newfile.css')

or

mix.styles(['resources/assets/style.css'], 'public/css/app.css') -> mix.styles(['resources/assets/style.css'], 'public/css/styles.css')

Edit: If you need everything in one file

mix.sass('resources/assets/sass/app.scss', 'public/css/app.css')
mix.styles(['public/css/app.css', 'resources/assets/style.css'], 'public/css/app.css')

Hope this helps

Upvotes: 1

Related Questions