Laravel, css/app.css disappear in mix-manifest.json every time i do a modification in the code

Question

Every time I change a line in my code, the line css/app.css in mix-manifest.json is deleted.

The only way to restore the line is to run npm run watch or npm run dev, but when I do a new modification in the code I got the same problem.

Here my mix-manifest.json when it's okay :

{
"/js/app.js": "/js/app.js",
"/css/app.css": "/css/app.css",
"/css/subscriber.css": "/css/subscriber.css",
"/css/agent.css": "/css/agent.css",
"/css/guest.css": "/css/guest.css",
"/js/mobile.js": "/js/mobile.js",
"/js/vendor.js": "/js/vendor.js",
"/js/manifest.js": "/js/manifest.js",
"/css/dragula.min.css": "/css/dragula.min.css"
}

The mix-manifest.json when it's not okay :

{
"/js/app.js": "/js/app.js",
"/js/mobile.js": "/js/mobile.js",
"/js/vendor.js": "/js/vendor.js",
"/js/manifest.js": "/js/manifest.js",
"/css/dragula.min.css": "/css/dragula.min.css"
}

My webpack.mix.js :

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

let ImageminPlugin = require('imagemin-webpack-plugin').default;

mix.webpackConfig({
    plugins: [
        new ImageminPlugin({
            disable: mix.inProduction() === false, // Disable during development
            test: /\.(jpe?g|png|gif|svg)$/i
        })
    ]
})
    .js('resources/assets/js/app.js', 'public/js').extract(['vue'])
    .sass('resources/assets/sass/app.scss', 'public/css')
    .sass('resources/assets/sass/subscriber.scss', 'public/css')
    .sass('resources/assets/sass/agent.scss', 'public/css')
    .sass('resources/assets/sass/guest.scss', 'public/css')
    .copy('node_modules/vue2-dragula/styles/dragula.min.css', 'public/css/dragula.min.css')
    .copyDirectory('resources/assets/img', 'public/img')
    .copyDirectory('resources/assets/fonts', 'public/fonts')
    // Mobile
    .js('resources/assets/js/mobile.js', 'public/js')

    //.disableNotifications();

if (mix.inProduction()) {
    mix.options({
      purifyCss : {
          purifyOptions: {
              whitelist: [
                  'is-invisible',
                  'is-clearfix',
                  'modal-card-foot',
                  'is-hovered',
                  'is-current',
                  '*columns*',
                  '*popover-*',
                  '*c-*',
                  '*ct-*',
                  '*-slide*',
                  '*taginput*',
                  'has-background-conciergerie',
                  '.is-hoverable tr:hover',
              ]
          }
      },
      uglify: {
          uglifyOptions: {
              compress: {
                  drop_console: true,
              }
          }
      }
    })
        .version();
}

Do you have any idea?

Thank you!

Answer 1

This sounds like an issue with your editor. I would highly recommend disabling all plugins and then re-adding them one at a time to find the offending plugin. Additionally if you want to confirm this theory, you could try using any other editor to edit and save a file.