在 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 不能在移动设备上正常工作

netlify - 将 Netlify 的托管身份服务与自托管 Netlify CMS 结合使用
我在自己的服务器上托管我的网站，并使用 Netlify CMS。但是，我仍然希望使用 Netlify 的托管 Identity 和 Git 网关服务，而不是运行我自己的服务。最佳答案是的，这是可能
netlify - 如何在 Netlify 站点上托管和访问文件
我正在使用 Netlify主持github repo并试图找到一种方法来在域上托管其他文件。 (如果您不知道 Netlify 是什么，请查看它。据我所知，它是 AWS 代码部署的快速脏版和免费版本。(
netlify - 如何在 Netlify 站点上托管和访问文件
我正在使用 Netlify主持github repo并试图找到一种方法来在域上托管其他文件。 (如果您不知道 Netlify 是什么，请查看它。据我所知，它是 AWS 代码部署的快速脏版和免费版本。(
netlify - 如何为 Netlify 子域支持构建 repo？
Netlify 子域基于存储库上的分支工作。如果我有一个域名 xyz.com 和 repo Repo-A，master 分支将部署到 xyz.com 和 dashboard 分支将部署到 dashbo
netlify - 如何在 netlify.toml 配置中插入环境变量
我想根据环境代理到不同的 api - 我尝试了以下主题的一些变体，但没有任何运气。如果可能的话，正确的方法是什么？ [build.environment] API_URI="https://dev
netlify - 是否可以将多个路径分组以在 Netlify _header 配置中使用相同的 header ？
根据 Netlify docs for custom headers我可以创建一个路径来使用自定义 header # use these headers for the /index.html fil
netlify - 是否可以将多个路径分组以在 Netlify _header 配置中使用相同的 header ？
根据 Netlify docs for custom headers我可以创建一个路径来使用自定义 header # use these headers for the /index.html fil
netlify - Hugo Netlify 构建过程失败 : Exit Code 255
我正在尝试将我的 Hugo 网站上传到 Netlify，但在构建过程中出现命令失败，退出代码 255: hugo 错误。由于这是我自己手工编码的东西，我确信我在这个过程中遗漏了一些重要的文件，这会导
netlify - 使用 Parcel.js 部署到 Netlify 失败
正如标题所说，部署到 Netlify 失败，从日志来看可能是我的 parcel.js设置。日志中的错误是: 12:19:29 AM: Error running command: Build scri
netlify - 使用 Netlify CMS 收集 Hugo 数据文件中的集合
我正在尝试使用 Netlify CMS 和 Hugo ssg 来头脑清醒。我使用: netlify-cms@1.0 hugo@0.29 我有一个简单的 netlify-cms config.yml，
Gatsby Cloud 从 Netlify 中删除了 netlify 功能
我在我的 gatsby 项目中设置了 netlify 函数，具有代理等功能。如果我通过 netlify 部署，一切都会按预期进行。如果我使用 gatsby cloud 进行另一次部署它实际上从 net
SPA 的 netlify 部署问题 : netlify. toml 设置
免责声明:我会使用 a.) Netlify 上的某种支持系统，b.) Netlify 实时聊天 session 或 c.) 通过他们的支持社区来提问，但是a.) 他们不允许你，b.) 他们没有，c.)
netlify - Netlify 是否可以在不强制使用 SSL 的情况下将流量从 http 重定向到 https
Netlify 社区经常提出的另一个问题。 “Netlify 能否在不强制使用 SSL (TLS) 的情况下将流量从 http 重定向到 https？” Once you have a certifi
javascript - 使用 gatsby-plugin-netlify 从 Netlify 重定向到自定义域？
我有一个像这样的 _redirects 文件: https://example.netlify.com/* https://example.com/:splat 301! 在根文件夹中。如何使用 g
github - Netlify CMS、Gatsby 和 GitHub 身份验证，无需 Netlify
是否有人幸运地使用 OAUTH 从 Netlify CMS 向 GB 进行身份验证，但没有使用 Netlify API？如果有的话，你用的是什么？我想使用我的域进行身份验证，但我不确定应该使用哪个 A
nuxt.js - 问题让 .env 在 Netlify 上工作。 Nuxt Netlify .env
问题让 .env 在 Netlify 上工作。我的仓库在这里: nuxt-axios-sheets 我在浏览器控制台中得到 key=undefined:加载资源失败:服务器响应状态为400 () 这
netlify - 如何将 netlify-cms 与自托管 gotrue 和 git-gateway 连接？
我认为标题是不言自明的。可以在这里找到存储库: https://github.com/netlify/netlify-cms/ https://github.com/netlify/git-gatew
netlify - 使用 netlify 将没有扩展名的 html 页面(又名 'pretty urls' )呈现为 html
我正在尝试使用 netlify 来托管静态站点。我正在使用 wget -mk http://hostname/ 构建网站所以我得到了大量的静态文件，并重写了链接。我想将他们推到 netlify 并让
reactjs - 我无法将 Next.js 部署到 Netlify。由于@netlify/plugin-nextjs 插件错误导致部署失败
我正在尝试部署我的 nextjs 应用程序 netlify，但它一直向我抛出失败错误，没有部署这是我的 github 存储库 https://github.com/farishelmipermana/
reactjs - 我无法将 Next.js 部署到 Netlify。由于@netlify/plugin-nextjs 插件错误导致部署失败
我正在尝试部署我的 nextjs 应用程序 netlify，但它一直向我抛出失败错误，没有部署这是我的 github 存储库 https://github.com/farishelmipermana/

首页

博学

6Ren·AI

商城

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