我创建了一个 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;
}
我解决了这个问题。我的 css 文件末尾有一个分号(拼写错误)。 Netlify 将所有静态文件捆绑在一起,因此捆绑的 css 工件无法正确加载。
我遇到了同样的问题。对我来说,这是因为我导入了一个空文件。
在我的
main.css
文件中,我导入了以下内容:
@import url("./reset.css");
@import url("./core-styles.css");
@import url("./buttons.css");
但是,我删除了
reset.css
样式表文件(同时将其保留在导入中)以支持不同的策略。一切仍在构建,但未正确捆绑,并且 Netlify 在部署的站点上未正确处理一些样式。
一旦我将其从我的
main.css
文件中删除(因为没有实际文件),一切又恢复正常了
我也有同样的问题。对我有用的是删除 package.json 中的 PurgeCSS postbuild 脚本
"scripts": {
"postbuild": "purgecss --css build/static/css/*.css --content build/index.html build/static/js/*.js --output build/static/css"
},