Laravel, css/app.css 每次我在代码中进行修改时都会在 mix-manifest.json 中消失

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

每次我更改代码中的一行时,mix-manifest.json 中的 css/app.css 行将被删除。

恢复线路的唯一方法是 运行 npm run watchnpm run dev,但是当我在代码中进行新的修改时,我遇到了同样的问题。

这是我的混音-manifest.json 没问题的时候:

{
"/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"
}

混音-manifest.json 不好的时候:

{
"/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"
}

我的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();
}

你有什么想法吗?

谢谢!

这听起来像是您的编辑器的问题。我强烈建议禁用所有插件,然后一次重新添加一个插件以找到有问题的插件。另外如果你想证实这个理论,你可以尝试使用任何其他编辑器来编辑和保存文件。

今天我在同时 运行 多个“npm 运行 watch”进程时发生了这种情况。杀死其中一个解决了问题。