Search code examples
javascriptcsslaravelvue.jsnpm-run

Changing .vue files in Laravel are automatically changing unrelated CSS


I'm working on a project in Laravel in which I'm building Vue components. Whenever I make any changes to a .vue file and stage it for a commit, changes are also made to the app.css and app.js files that I didn't do, specifically undoing the same bit of css from a commit from a while ago. My boss and I think that it's an issue with the compiler-- if so, is there a way to prevent the compiler from behaving this way? If it's not the compiler, does anyone have any idea what this could be?


Solution

  • Laravel uses Laravel Mix which is a wrapper around webpack for compiling your js and scss files. This also includes your Vue files which are compiled as part of your app.js. This is perfectly normal behaviour.

    By default the compiler reads your js and sass files from the resources directory and compiles them into public/js/app.js and public/css/app.css. You should not be directly coding into those two files in the public directory otherwise every time you compile those files will be overwritten!

    Write all your js and css code in the resources directory.