身份验证页面没有在 laravel 中获取 css答案

【问题标题】：auth pages not getting css in laravel身份验证页面没有在 laravel 中获取 css
【发布时间】：2020-01-26 10:33:17
【问题描述】：

我是 laravel 的初学者。我已经创建了项目。我已经对其运行了以下命令。

composer require laravel/ui --dev
npm install
npm run dev
php artisan ui vue
php artisan ui vue --auth

在这个命令之后，我的欢迎页面上出现了Login 和Register 菜单。现在我的 laravel 欢迎页面可以正常加载。但是当我点击登录时，它会显示纯 html。我搜索并检查了 app.blade.php 中的 css 和 js 链接。看起来不错。 layouts/app.blade.php 有以下链接

<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<script src="{{ asset('js/app.js') }}" defer></script>

问题应该出在哪里？为什么登录和注册没有得到 css，当欢迎页面得到 css 时？请指导。

【问题讨论】：

您可以在浏览器中访问/css/app.css，它是否已加载？欢迎页面不使用布局 IIRC，它嵌入了样式
/css/app.css 显示空白页，没有错误
请分享您在开发者工具的 Elements 选项卡中看到的 css 路径。
您的 .css 为空？那很奇怪。（可以肯定的是，您在浏览器中访问了http://localhost:8000/css/app.css？或者您从哪个域为您的应用程序提供服务）我想您在运行npm run dev 时没有遇到任何错误？可能是浏览器缓存问题？
您尝试过什么调试问题？检查哪些 CSS 路径写入了可以工作的页面以及不可以工作的页面应该不会太难

标签： php laravel laravel-6 laravel-ui

【解决方案1】：

第 1 步：

下载nodejs
在你的电脑上安装 nodejs

第 2 步：

然后打开您的项目根目录和命令
composer require laravel/ui
php artisan ui vue --auth
npm install
npm run dev

在npm 命令之后，它将在您的项目中生成node_module 文件夹，删除该文件夹。

npm 命令仅适用于.css 和.js 文件。

如需帮助，请观看此视频：https://www.youtube.com/watch?v=hOYW3jqh19I&t=9s

【讨论】：

我已经下载并安装了 nodejs 并按照我在问题中提到的命令运行它的命令。还是有问题。
我以错误的顺序运行命令，正如您在问题中看到的那样。这就是为什么css文件的大小为零。我猜必须遵循正确的安装资产命令的顺序，例如`composer require laravel/ui --dev, php artisan ui vue, php artisan ui vue --auth, npm install, npm run dev`
请在您的答案中添加一些解释 - 如果某些页面可以正常工作，而其他页面不能正常工作，那么通过这两个步骤究竟会改变什么？
不想用vue的人用bootstrap代替vue
如果npm run dev 导致错误，或者如果说Please run Mix again. 只需运行npm i vue-loader，你应该很高兴

【解决方案2】：

您可以从这里下载这两个文件：

然后将 css 和 js 文件夹创建到 public 文件夹中即可：

CSS 文件：app.css 到 project_folder/public/css/

JS 文件：app.js 进入 project_folder/public/js/

它对我有用。我认为它也对你有用。谢谢。

【讨论】：

请在您的回答中添加一些解释 - 如果某些页面有效，而其他页面无效，那么通过这两个步骤到底改变了什么？
app.css 也是空的！，我用 bootstrap.min.css 填充它，现在可以工作了谢谢你的回答

【解决方案3】：

在这种情况下，有时缓存可能是问题，您可以运行

php artisan cache:clear 和可选的php artisan view:clear。

【讨论】：

【解决方案4】：

运行命令：

npm uninstall popper.js && npm i @popperjs/core

删除已弃用的软件包并安装新的 Popper v2。

【讨论】：

请在您的回答中添加一些解释 - 如果某些页面可以正常工作，而其他页面不能正常工作，那么到底发生了什么变化？

【解决方案5】：

对我来说，这只是npm run dev 命令。在我的 ubuntu 19.10 中，它必须使用 sudo 运行

【讨论】：

运行 DEV 我得到：[webpack-cli] /home/stephen/Websites/CNO/node_modules/laravel-mix/src/Mix.js:18 static _primary = null; 和一堆错误。任何想法为什么或如何解决这个问题 - 我被卡住了
@Hondaman900 如果你仍然有这个问题，你应该打开一个 stackoverflow 请求，从你说的错误代码中我不知道它可能是什么，也许只是删除 node_modules 并做一个新的 npm i。

【解决方案6】：

这个问题的非常简单的解决方案是使用下面的cdn

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

而不是

<link href="{{ asset('css/app.css') }}" rel="stylesheet">

我提供的链接是引导 cdn 并检查 .它会工作并使用

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>

而不是

<link href="{{ asset('js/app.js') }}" rel="stylesheet">

【讨论】：

它起作用了，它应该起作用了。还有其他方法吗？比如，我的 app.js 和 app.css 是公开的，是用 npm run dev 从 scss 编译的。但是来自 app.blade.php 的路径与您的回答完全一样。

【解决方案7】：

您需要清除浏览器上的缓存。要确认进入隐身模式并再次尝试您的 URL。如果它有效，那就是问题所在。

【讨论】：

【解决方案8】：

我在 laravel 8 中尝试了以下命令，效果很好

composer require laravel/ui
php artisan ui bootstrap
php artisan ui bootstrap --auth
npm install
npm run dev
npm run production

【讨论】：

【解决方案9】：

我在 laravel 8 中尝试了以下命令，效果很好，您也可以尝试一下。

composer require laravel/ui
php artisan ui bootstrap --auth
npm install
npm run dev
npm run production

【讨论】：

我用那个代码解决了这个问题：npm run production 谢谢@ataur-rahman

【解决方案10】：

运行

npm install
npm run dev
npm run watch 继续编译

【讨论】：

【解决方案11】：

我在 laravel 版本 7 中实现 composer require laravel/ui 时遇到了同样的问题，但我按照以下步骤修复了它。

第一：

下载nodejs
在你的电脑上安装 nodejs

第二：运行这个命令

composer require laravel/ui

安装laravel/ui 包后，您可以使用 ui Artisan 命令安装前端脚手架：

// Generate basic scaffolding...
php artisan ui bootstrap
php artisan ui vue
php artisan ui react

// Generate login / registration scaffolding...
php artisan ui bootstrap --auth
php artisan ui vue --auth
php artisan ui react --auth

要在项目中生成node_module 文件夹，请运行以下命令

npm install

使用 npm install 安装依赖项后，您可以使用 Laravel Mix 将 SASS 文件编译为纯 CSS。 npm run dev 命令将处理 webpack.mix.js 文件中的指令。通常，您编译的 CSS 将放在 public/css 目录中：

npm run dev

有时您可能需要运行此命令 npm audit fix 或 npm audit fix --force 来修复某些需要的软件包。

也许一段时间运行这个命令npm run dev 或npm run watch 会显示如下错误。

@ dev C:\xampp\htdocs\Auth
 npm run development 
@ development C:\xampp\htdocs\Auth
mix
        Additional dependencies must be installed. This will only take a moment.
 
        Finished. Please run Mix again.
 
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ development: `mix`

只要再次运行npm run watch，它就会启动Mix █████████████████████████ emitting (95%)，成功后构建也会成功。

【讨论】：

【解决方案12】：

公开您的 CSS。我的意思是将您的 CSS 文件保存在项目的公共目录中。您的 css 文件应位于：yourprojectname\public\css\app.css

【讨论】：

【解决方案13】：

您需要为 laravel 7.x 运行以下命令。

解决方案

首先转到您的项目根文件夹 C:\Whatever\Your_project_name>

      composer require laravel/ui

根据您的前端框架尝试以下任一命令。

      php artisan ui vue --auth
      php artisan ui bootstrap --auth
      php artisan ui react --auth

最后别忘了跑

      npm install

如果您的用户界面无法正常工作，请尝试以下命令。

      npm run production

如果上述命令对您不起作用。

原因：错误是因为public/css/app.css中没有css代码，当你执行完所有命令后，该文件夹中仍然没有代码。 p>

从https://github.com/sabaoonbedar/Css-File-For-Laravel-Developers/tree/master 获取文件或代码并将其放在您的项目 public/css/app.css 或如果不存在，则创建类似的文件夹。

【讨论】：

【解决方案14】：

在我看来，您的 node.js 版本已经过时了。只需更新 Node.js 并通过安装 laravel ui 等从头开始。

composer require laravel/ui
php artisan ui vue
php artisan ui vue --auth
npm install
npm run dev

希望它能解决问题。

【讨论】：

【解决方案15】：

您必须使用npm run watch 命令编译包。之后你可以运行npm run dev

【讨论】：

【解决方案16】：

这个命令在我的机器命令中工作。

npm run dev

【讨论】：

【解决方案17】：

   composer require laravel/ui

   php artisan ui vue
   npm install
   npm run dev

   php artisan ui vue --auth
   npm install
   npm run dev

您必须为两个脚手架调用 npm install 和 npm run dev

【讨论】：

【解决方案18】：

我遇到了同样的问题 CSS & js 适用于 CDN 链接，但不适用于默认 CSS。所以 public/css/app.css 和 js 文件中没有 CSS 代码文件，所以我从另一个 laravel 目录复制并粘贴公共目录中的代码和文件，现在可以正常工作了。

【讨论】：

【解决方案19】：

安装完所有东西后试试这个

npm update vue-loader

【讨论】：

【解决方案20】：

在你的 Laravel 项目中运行以下命令。

composer require laravel/ui 
php artisan ui bootstrap --auth
npm install
npm run dev

【讨论】：