在 Laravel 中更改 .vue 文件会自动更改不相关的 CSS答案

【问题标题】：Changing .vue files in Laravel are automatically changing unrelated CSS在 Laravel 中更改 .vue 文件会自动更改不相关的 CSS
【发布时间】：2020-04-28 23:29:08
【问题描述】：

我正在 Laravel 中开发一个项目，我正在构建 Vue 组件。每当我对 .vue 文件进行任何更改并将其暂存以进行提交时，也会对我没有做的 app.css 和 app.js 文件进行更改，特别是从来自前一阵子。我的老板和我认为这是编译器的问题——如果是这样，有没有办法阻止编译器这样做？如果不是编译器，有没有人知道这可能是什么？

【问题讨论】：

这个css和js文件是自己写的，还是watch任务（webpack之类的）生成的？
CSS 和 JS 是 Bootstrap 4，但是自动进行的更改是针对我自己添加到 CSS 文件中的规则以及与这些规则相关的 JS 片段
您是在直接编辑public/css/app.css 和public/js/app.js，然后更改会被覆盖吗？
是的，但是对public/css/app.css 和public/js/app.js 的编辑是在之前的提交中进行的

标签： javascript css laravel vue.js npm-run

【解决方案1】：

Laravel 使用 Laravel Mix 来封装 webpack 来编译你的 js 和 scss 文件。这还包括您的 Vue 文件，这些文件被编译为您的app.js 的一部分。这是完全正常的行为。

默认情况下，编译器会从resources 目录中读取你的js 和sass 文件，并将它们编译成public/js/app.js 和public/css/app.css。您不应该直接在public 目录中的这两个文件中进行编码，否则每次编译时这些文件都会被覆盖！

在resources目录下写下你所有的js和css代码。

【讨论】：

非常感谢！我是 Laravel 的新手，曲线有时会感觉很陡峭。这是一个很大的帮助！
laracasts.com 有很多关于 Laravel 和 Vue 的教程。刚开始的时候帮了我很多。 :)

【解决方案2】：

这可能是您使用时有时会出现的错误

npm run watch

作为检查文件更改的脚本。

你可以试试

npm run watch -poll

这将定期手动（例如每秒）检查更改。

【讨论】：