文章/答案/技术大牛

发布

社区首页 >问答首页 >在netlify中部署时未拾取CSS样式

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

Stack Overflow用户

提问于 2019-06-18 18:46:05

回答 1查看 2.1K关注 0票数 0

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

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

我试过在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;
}

css

reactjs

webpack

netlify

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-08-25 03:44:46

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

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/56647377

复制

相似问题

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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