【发布时间】：2016-08-15 18:14:22
【问题描述】：
我目前对index.html 的设置是
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Practice Example</title>
<!-- favicon -->
<link rel="icon" href="/img/favicon.ico"/>
<meta name="description" content="Practice Example">
<meta
name="viewport"
content="width=device-width, initial-scale=1, user-scalable=0, maximum-scale=1, minimum-scale=1"
>
<link rel="stylesheet" type="text/css" href="app.css">
</head>
<body>
<div id="app"></div>
<script>
var WebFontConfig = {
google: { families: [ 'Roboto:400,300,500:latin' ] }
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();
</script>
<script src="bundle.js"></script>
</body>
</html>
我正在尝试遵循以下教程http://callmenick.com/post/animated-resizing-header-on-scroll，并且下载的源代码具有以下文件：
我应该在哪里以及如何将他们的 index.html 干净、正确地整合到我的中？我也应该使用 .css 或 .scss 还是两者兼而有之？
提前谢谢你！
【问题讨论】：
-
你想将它集成到你的 react 构建中还是分开？
-
@David 对不起，你能澄清一下区别吗？还在学习中
-
我看到你正在使用 react 并且已经有一个 bundle.js ，我问你是否想将他们的 css 内联到 bundle.js文件或只是将 css 包含到 index.html 页面中。如果你做前者你必须在 webpack 中做 css 加载器，如果你使用 webpack 但后者很简单，你只需将 css 包含在 index.html 的标题中
-
@David 无论是否简单，您认为哪一个是最佳实践？如您所见，我已经有一个名为
app的 .css 文件。它只是直接放置在与bundle.js相同的位置并且工作正常。这不是正确的做法吗？ -
这取决于你的用例，但大多数反应社区确实使用 webpack css 加载器并将其包含在 bundle.js 中而不是在 index.html 中查看此链接webpack.github.io/docs/stylesheets.html跨度>
标签： javascript html css reactjs