Laravel preset React: problems encountered when `npm run dev` is executed

Question

I have some issues with using React in Laravel 5.5. Every time I add or make changes to a component, I have to run npm run dev to compile the thing. When I do this the contents of css/app.css get reset, so I cannot write styles to this file.

Styles get unchanged if I have them in another CSS file, but I'd like to have my main styles written in css/app.css.

How can I do this?

You are not supposed to add styles on css/app.css file. That file is generated everytime you compile your assets. — Hedegare
– Hedegare, Commented Oct 13, 2017 at 16:56
@Jackowski sorry for a stupid question then, but if it's autogenerated every time assets are compiled then why it is even present? — Le garcon
– Le garcon, Commented Oct 13, 2017 at 17:09
Everytime you run npm run dev your styling assets are aggregated in one single file (css/app.css). This way in your html files you just need to add this file to the head of your document and you'll have access to all your styles. — Hedegare
– Hedegare, Commented Oct 13, 2017 at 17:15

user1436631 · Accepted Answer · 2017-10-13 18:04:05Z

1

Keep all your css styles in a file in your resources directory and add the below code to end of your webpack.mix.js file.

mix.styles('path to your css file in resources directory', 'public/css/app.css');

If you are using sass use the below code

mix.sass('path to your css file in resources directory', 'public/css/app.css');

Also you no need to run npm run dev each time you make changes to your components. just run npm run watch and it will continuously look for changes and re-compile the components if anything is changed.

answered Oct 13, 2017 at 18:04

user1436631

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Laravel preset React: problems encountered when `npm run dev` is executed

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related