时间戳

首页 > 解决方案 > 网站/服务器不呈现 CSS/App.css？

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

问题描述

我的网站没有呈现我的 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")]
    });

标签： phplaravellocalhostforgetailwind-css

解决方案

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

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

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

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

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

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

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

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

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

推荐阅读