Website/Server 不渲染 CSS/App.css？

Question

我的网站没有呈现我的 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 运行生产构建成功。

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")]
    });

Answer 1

您显然缺少编译资产。

在本地，您已经编译并运行了 CSS；因此它看起来很漂亮。

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

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

app.css:1 Failed to load resource: the server responded with a status of 404 (Not Found)

fun.svg:1 Failed to load resource: the server responded with a status of 404 (Not Found)

workflow-mark-on-white.svg:1 Failed to load resource: the server responded with a status of 404 (Not Found)

app.js:1381 [Vue warn]: Cannot find element: #app

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

Answer 2

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

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

Website/Server 不渲染 CSS/App.css？

Website/Server not rendering CSS/App.css?

php

localhost

laravel

forge

tailwind-css