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

Question

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

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

我试过在 Netlify 中关闭资产优化。我还尝试重命名我的 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;
}

Answer 1

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

Answer 2

我运行遇到了同样的问题。对我来说，这是因为我导入了一个空文件。

在我的 main.css 文件中，我有以下导入：

@import url("./reset.css");
@import url("./core-styles.css");
@import url("./buttons.css");

但是，我删除了 reset.css 样式表文件（同时将其保留在导入中）以支持不同的策略。一切仍在构建，但未正确捆绑，Netlify 在已部署站点上未正确处理一些样式。

一旦我将它从我的 main.css 文件中删除（因为没有实际文件），一切又恢复正常了

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

CSS Style not being picked up when deployed in netlify

css

reactjs

webpack

netlify