在 netlify 中部署时未拾取 CSS 样式-6ren

在 netlify 中部署时未拾取 CSS 样式

转载作者：行者123 更新时间：2023-11-27 23:48:54

25

4

我创建了一个 create-react-app 并尝试首次使用 Netlify 部署它(样本是 here )。但是，部署完成后，该站点看起来与本地站点不同。例如，我的网格布局无法正常工作。

我可以看到样式的打包方式与本地打包方式不同。 Netlify 正在创建一些 /static/css/*.chunk.css确实包含我的样式的文件。在本地部署时，样式只需添加到 <head> 中父文档的标记为 <style type="text/css">

我试过在 Netlify 中关闭 Assets 优化。我也试过重命名我的 CSS 类，甚至直接将它包含在 create-react-app 元素的 index.js 文件中。似乎没有什么不同。

这是我的 package.json

{
  "name": "knowledge-repo",
  "version": "0.1.0",
  "private": true,
  "proxy": "http://localhost:3001/",
  "dependencies": {
    "@toast-ui/react-editor": "^1.0.0",
    "array-move": "^2.1.0",
    "mongoose": "^5.5.13",
    "react": "^16.8.6",
    "react-ace": "^6.5.0",
    "react-codemirror": "^1.0.0",
    "react-dom": "^16.8.6",
    "react-scripts": "2.1.8",
    "react-sortable-hoc": "^1.9.1",
    "semantic-ui": "^2.4.2",
    "semantic-ui-react": "^0.86.0"
  },
  "scripts": {
    "start": "run-p start:**",
    "start:app": "react-scripts start",
    "start:lambda": "netlify-lambda serve src/lambda",
    "build": "run-p build:**",
    "build:app": "react-scripts build",
    "build:lambda": "netlify-lambda build src/lambda",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "devDependencies": {
    "dotenv": "^8.0.0",
    "http-proxy-middleware": "^0.19.1",
    "netlify-lambda": "^1.4.13",
    "npm-run-all": "^4.1.5"
  }
}

这是使用 *.css 的组件

import React from 'react';
import KnowledgeSubjectBrowser from './KnowledgeSubjectBrowser';
import KnowledgeRepoHeader from './KnowledgeRepoHeader';
import KnowledgeRepoSidebar from './KnowledgeRepoSidebar';
import styles from './KnowledgeRepo.css'

class KnowledgeRepo extends React.Component {

    render(){
        return (
      <div className={styles.krcontainer}>
        <header>
          <KnowledgeRepoHeader />
        </header>
        <nav>
          <KnowledgeRepoSidebar />
        </nav>
        <main>
          <KnowledgeSubjectBrowser />
        </main>
      </div>
        )
    }
}

export default KnowledgeRepo;

css文件如下:

:local(.krcontainer) {
  display: grid;

  grid-template-areas:
    "header header header"
    "nav content side";

  grid-template-columns: 100px 1fr 200px;
  grid-template-rows: auto 1fr;
  grid-gap: 0px;

  height: 100vh;

}

header {
  grid-area: header;
  background: black;
}

nav {
  padding: 30px 5px 20px 5px;
  grid-area: nav;
  background: black;
}

main {
  grid-area: content;
}

最佳答案

我想通了这个问题。我的 css 文件(拼写错误)的末尾有一个分号。 Netlify 将所有静态文件捆绑在一起，因此捆绑的 css 工件未正确加载。

关于在 netlify 中部署时未拾取 CSS 样式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56647377/

25

4

0

文章推荐： javascript - 如何检测mathquill编辑器写方程

文章推荐： c++ - '{' token 之前的预期类名 - 带有头文件和 cpp 文件

文章推荐： javascript - Toggle.slide.right 不能在移动设备上正常工作

postgresql - 通过 jenkins 部署 postgres - 持续集成/部署
我在 *.sql 文件中得到了我的数据库转储(表、函数、触发器等)。此时我正在通过 jenkins 部署它们，通过传递执行 shell 命令: sudo -u postgres psql -d my_
api - Web 部署 API(部署 .zip 包)说明
我正在使用网络部署 API 来部署网络包(.zip 文件，由 MSDeploy.exe 创建)以编程方式将包发布到服务器(在发布包之前我们需要做一些其他事情这就是为什么我们不使用 MSDeploy.e
c# - Web 部署 API - 部署 .NET 4.5 应用程序
我们正在使用 Web Deploy 3 的(几乎完全未记录的)“公共(public) API”来创建我们网站的 .zip 包，然后将其同步到服务器: DeploymentBaseOptions des
Clojure 部署？
将 clojure 应用程序制作成可执行文件的最简单方法是什么，例如 http://rawr.rubyforge.org/ ruby 吗？ (exe 和 app 文件也是) 最佳答案使用 leini
Android内核编译/部署
是否可以下载 Android 源代码并针对任何设备进行编译？我想做的是尝试 GSM 代码部分并编译操作系统并将其部署到我的摩托罗拉手机上。谢谢! 最佳答案是的，但这很难，因为大多数手机不共享驱动
c++ - 部署
我正在考虑用 c/c++ 编写需要在大多数个人计算机上运行的 nbody 样式模拟。本质上是一个 O(n^2) 粒子模拟器。因为这需要相当用户友好，所以我希望有 1 个不需要用户安装任何东西的 Wi
Kubernetes 部署 - 状态副本和规范副本之间的区别
需要了解 kubernetes 部署中 kube_deployment_status_replicas 和 kube_deployment_spec_replicas 指标的区别最佳答案简而言之，
Maven 部署 + 源分类器
我正在尝试使用分类器部署 Maven Artifact 。由于我需要源代码和 JAR(我从 GWT 使用它)，我想获得 artifact-version-classifier.jar 和 artifa
PhpStorm 部署 - 每次都要求提供登录凭据
我设置部署以将我的项目代码与存储我的网站的 FTP 服务器上的项目同步。但是，每次尝试同步时，我总是必须登录。我什至检查了记住，但它不起作用! 我正在使用最新的 PhpStorm 2017.1.4
ASP.NET 部署
我在 Visual Studio 2008 中开发了一个 ASP.NET 网站。现在我想在其他机器上部署它。我怎样才能做到这一点？？就像我们为 Windows 应用程序制作安装包一样，我们可以为 AS
Qt Mac 部署
将 QT 框架添加到我的 .app 包中我正在关注 Qt 站点上关于部署的文档。我创建了一个名为 HTTPClient.app 的应用程序我在 Contents 下创建了 Framework 文
eclipse - JavaMe 部署
这个问题不太可能对任何 future 的访客有帮助；它只与一个小的地理区域、一个特定的时间点或一个非常狭窄的情况相关，通常不适用于互联网的全局受众。如需帮助使这个问题更广泛适用，visit the h
部署 CMS 驱动的内容
我正在研究改变我目前创建营销网站的策略。目前，我完全用 PHP 从头开始构建网站，使用一个简单的包含系统。所有代码(以及内容)都存储在文件(而不是数据库)中，允许我使用 Subversion 进行
没有端口的 Kubernetes 部署
我有一个长期运行的服务(在 while 1 循环中)并通过 GCloud pub/sub 处理有效负载，之后它将结果写入数据库。该服务不需要监听任何端口。 Kind=Deployment 的声明性
kubernetes - 如何诊断停滞的Kubernetes部署/部署？
似乎部署已停滞不前。我该如何进一步诊断？ kubectl rollout status deployment/wordpress Waiting for rollout to finish: 2 ou
dart - AngularDart转换/部署
我正在Dart中使用前端的Angular和后端的Shelf构建一个客户端/服务器应用程序。当我执行pub build时，它会按预期生成Dart文件的javascript，但不会替换HTML文件中的Da
Azure 部署 - 授权后无法查看所有存储库
我在 Azure 部署中心的下拉列表中看不到我的所有 Github 组织存储库。 Azure 很久以前就已经被授权了，下拉列表正确地显示了所有的存储库，直到上周我在 DevOps 中玩游戏时，不得不再
部署: Most secure,最优雅的方式来获取登录用户创建的特定集合中的所有对象？
我认为标题几乎说明了一切...对于 Deployd 来说是全新的，所以任何关于如何最好地实现这一点的指示都值得赞赏。最佳答案要获取用户创建的集合中的对象(我假设您使用的是 javascript 库
bash - 使用Bash脚本进行Docker构建/部署
我有一个试图用于CD服务器的部署脚本，但是在编写bash脚本以完成一些所需的步骤(例如运行npm和迁移命令)时遇到了问题。我将如何从该脚本进入容器bash，运行下面的命令，然后退出以完成对更改的提取
Kubernetes 部署 - 传递参数
我想在使用 kubectl 时将参数传递给 Kubernetes 部署命令应用部署文件。示例:在我的部署 .yaml 中，我有如下参数，我想在使用 kubectl apply - f .yaml 运

首页

博学

6Ren·AI

商城

在 netlify 中部署时未拾取 CSS 样式