网站/服务器不呈现 CSS/App.css？

Posted 2023-03-07

【中文标题】网站/服务器不呈现 CSS/App.css？

【英文标题】：Website/Server not rendering CSS/App.css?

【发布时间】：2020-07-30 07:59:32

【问题描述】：

我的网站没有呈现我的 CSS。在我的本地主机上，它工作正常。我很难理解为什么？

更新 #1：我卸载了所有内容并重新安装，希望之前可能会错误地执行此操作……但同样的问题仍然存在。尝试通过添加 /public 甚至完整路径 users/name/projectname/public 等来修改路径 /css/app.css ，但也没有工作。

更新 #2：将我的 css/app.css 文件与另一个项目进行比较，似乎代码没有正确呈现。我用我的其他项目（使用相同的框架和依赖项）替换了 app.css，但是同样的问题仍然存在。 CSS 刚刚被渲染。

回购 - https://github.com/PT-83/FamiJam

https://famijam.com/

技术栈：Laravel 7、TailwindCSS、Digitial Ocean、Laravel Forge。

运行 npm run production build 成功。

Asset /css/app.css and /js/app.js 以黄色突出显示并说 [emitted] [big] /js/app

在 chrome 中检查后，显示的错误如下。

Uncaught TypeError: Cannot set property 'onclick' of null
    at Object../resources/js/app.js (app.js:12796)
    at __webpack_require__ (app.js:20)
    at Object.0 (app.js:12894)
    at __webpack_require__ (app.js:20)
    at app.js:84
    at app.js:87

Failed to load resource: the server responded with a status of 404 ()https://famijam.com/ 

与本地主机

附加错误

    "resource": "/Users/paolo/Documents/code/Famijam/public/CSS/app.css",
    "owner": "_generated_diagnostic_collection_name_#2",
    "code": "propertyIgnoredDueToDisplay",
    "severity": 4,
    "message": "Property is ignored due to the display. With 'display: block', vertical-align should not be used.",
    "source": "css",
    "startLineNumber": 3,
    "startColumn": 3183,
    "endLineNumber": 3,
    "endColumn": 3204


    "resource": "/Users/paolo/Documents/code/Famijam/public/CSS/app.css",
    "owner": "_generated_diagnostic_collection_name_#2",
    "code": "vendorPrefix",
    "severity": 4,
    "message": "Also define the standard property 'filter' for compatibility",
    "source": "css",
    "startLineNumber": 8,
    "startColumn": 1758,
    "endLineNumber": 8,
    "endColumn": 1768

webpack.mix.js

const mix = require('laravel-mix');
const tailwindcss = require("tailwindcss");

mix.js("resources/js/app.js", "public/js")
    .sass("resources/sass/app.scss", "public/css")
    .options(
        processCssUrls: false,
        postCss: [tailwindcss("./tailwind.config.js")]
    );

【参考方案1】：

您显然缺少已编译的资产。

在本地，您的 CSS 已编译并正常工作；因此它看起来很漂亮。

在生产中，很明显您的 CSS 没有加载。

我查看了网站，您可以在 Chrome 开发工具中看到：

app.css:1 加载资源失败：服务器响应状态为404（未找到）

fun.svg:1 加载资源失败：服务器响应状态为 404（未找到）

workflow-mark-on-white.svg:1 加载资源失败：服务器响应状态为 404（未找到）

app.js:1381 [Vue 警告]：找不到元素：#app

您可能需要在服务器上部署时编译资产，或者在本地编译并确保将它们推送到您的存储库以进行部署。

【讨论】：

“您可能需要在服务器上部署时编译资产，或者在本地编译并确保将它们推送到您的存储库进行部署。”如何编译资产？有什么资源可以指点我吗？

npm run prod - 这与您在开发期间用于本地编译的过程相同，除了在本地运行npm run dev 或npm run watch。

DONE 在 7539 毫秒内成功编译（这是输出） Asset Size Chunk Chunk Names /css/app.css 85 KiB 0 [emitted] [big] /js/app, /js/app.js 289 KiB 0 [发出] [大] /js/app, /js/app.js.LICENSE.txt 2.1 KiB [发出]

您的资产确实已经编译，但我无法在您的服务器上找到它们； famijam.com/css/app.css - 您需要调查为什么该文件返回 404 而不是您的 CSS

该错误不是 CSS 错误，而是服务器一开始就没有提供 CSS 文件。当我们尝试加载文件时得到 404。

【参考方案2】：

我发现 UNIX 系统是区分大小写的。 /CSS 文件夹与 /css 不同。

我将文件夹命名为大写的 CSS，因此更改 layout.app 视图中的链接以匹配此命名约定，我现在可以完美地呈现 CSS。