ReactJS + Redux：在哪里正确包含CSS和index.html文件？
[英]ReactJS + Redux: Where to properly include CSS and index.html files?
问题描述
我当前为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还是两者都使用？
先感谢您！
1 个解决方案
解决方案1
1 已采纳 2016-08-15 19:53:02
你已经有了他们的资产
在这里，我从您的index.html中提取了相关部分，并将其与他们的index.html合并。 复制并将其粘贴到index.html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- title and meta -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<meta name="description" content="" />
<title>Header Resize On Scroll with Animations</title>
<!-- css -->
<link href='http://fonts.googleapis.com/css?family=Ubuntu:300,400,700,400italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="app.css">
<!-- js -->
<script src="js/classie.js"></script>
<script>
function init() {
window.addEventListener('scroll', function(e){
var distanceY = window.pageYOffset || document.documentElement.scrollTop,
shrinkOn = 300,
header = document.querySelector("header");
if (distanceY > shrinkOn) {
classie.add(header,"smaller");
} else {
if (classie.has(header,"smaller")) {
classie.remove(header,"smaller");
}
}
});
}
window.onload = init();
</script>
</head>
<body>
<div id="wrapper">
<header>
<div class="container clearfix">
<h1 id="logo">
LOGO
</h1>
<nav>
<a href="">Lorem</a>
<a href="">Ipsum</a>
<a href="">Dolor</a>
</nav>
</div>
</header><!-- /header -->
<div id="main">
<div id="content">
<section>
<div class="container">
<h1>Header Resize On Scroll with Animations</h1>
<p>Cupcake ipsum dolor sit amet lollipop. Macaroon candy cotton candy bear claw macaroon carrot cake pastry icing dessert. Cupcake pastry tart sesame snaps lollipop donut pie. Cookie apple pie toffee lemon drops jelly beans cheesecake sweet roll. Jelly-o soufflé donut candy canes wafer dragée sweet cheesecake. Macaroon caramels pie cookie gummi bears. Ice cream jelly-o toffee cookie gingerbread cookie. Soufflé fruitcake jelly-o jelly chupa chups jelly beans. Dragée marzipan pastry macaroon oat cake muffin soufflé topping liquorice. Jelly-o chocolate cake lollipop.</p>
<p>Sugar plum muffin cookie pastry oat cake icing candy canes chocolate. Gummi bears chupa chups fruitcake dessert jelly. Muffin cookie ice cream soufflé pastry lollipop gingerbread sweet. Unerdwear.com bonbon candy marzipan bonbon gummies chocolate cake gummi bears powder. Unerdwear.com tart halvah chocolate cake dragée liquorice. Sugar plum chocolate bar pastry liquorice dragée jelly powder. Jelly tootsie roll applicake caramels. Marzipan candy tootsie roll donut. Gummies ice cream macaroon applicake.</p>
<p>
<a href="http://www.callmenick.com/tutorials/create-an-animated-resizing-header-on-scroll">« Go back to this tutorial?</a><br>
<a href="http://www.callmenick.com/tutorials">« Go back to all tutorials?</a>
</p>
</div>
</section>
<section class="color">
<div class="container">
<h1>Cupcakes for the people!</h1>
<p>Cupcake ipsum dolor sit amet lollipop. Macaroon candy cotton candy bear claw macaroon carrot cake pastry icing dessert. Cupcake pastry tart sesame snaps lollipop donut pie. Cookie apple pie toffee lemon drops jelly beans cheesecake sweet roll. Jelly-o soufflé donut candy canes wafer dragée sweet cheesecake. Macaroon caramels pie cookie gummi bears. Ice cream jelly-o toffee cookie gingerbread cookie. Soufflé fruitcake jelly-o jelly chupa chups jelly beans. Dragée marzipan pastry macaroon oat cake muffin soufflé topping liquorice. Jelly-o chocolate cake lollipop.</p>
<p>Sugar plum muffin cookie pastry oat cake icing candy canes chocolate. Gummi bears chupa chups fruitcake dessert jelly. Muffin cookie ice cream soufflé pastry lollipop gingerbread sweet. Unerdwear.com bonbon candy marzipan bonbon gummies chocolate cake gummi bears powder. Unerdwear.com tart halvah chocolate cake dragée liquorice. Sugar plum chocolate bar pastry liquorice dragée jelly powder. Jelly tootsie roll applicake caramels. Marzipan candy tootsie roll donut. Gummies ice cream macaroon applicake.</p>
</div>
</section>
<section>
<div class="container">
<h1>Chocolate, vanilla, and red velvet</h1>
<p>Cupcake ipsum dolor sit amet lollipop. Macaroon candy cotton candy bear claw macaroon carrot cake pastry icing dessert. Cupcake pastry tart sesame snaps lollipop donut pie. Cookie apple pie toffee lemon drops jelly beans cheesecake sweet roll. Jelly-o soufflé donut candy canes wafer dragée sweet cheesecake. Macaroon caramels pie cookie gummi bears. Ice cream jelly-o toffee cookie gingerbread cookie. Soufflé fruitcake jelly-o jelly chupa chups jelly beans. Dragée marzipan pastry macaroon oat cake muffin soufflé topping liquorice. Jelly-o chocolate cake lollipop.</p>
<p>Sugar plum muffin cookie pastry oat cake icing candy canes chocolate. Gummi bears chupa chups fruitcake dessert jelly. Muffin cookie ice cream soufflé pastry lollipop gingerbread sweet. Unerdwear.com bonbon candy marzipan bonbon gummies chocolate cake gummi bears powder. Unerdwear.com tart halvah chocolate cake dragée liquorice. Sugar plum chocolate bar pastry liquorice dragée jelly powder. Jelly tootsie roll applicake caramels. Marzipan candy tootsie roll donut. Gummies ice cream macaroon applicake.</p>
</div>
</section>
<section class="color">
<div class="container">
<h1>Come to me!</h1>
<p>Cupcake ipsum dolor sit amet lollipop. Macaroon candy cotton candy bear claw macaroon carrot cake pastry icing dessert. Cupcake pastry tart sesame snaps lollipop donut pie. Cookie apple pie toffee lemon drops jelly beans cheesecake sweet roll. Jelly-o soufflé donut candy canes wafer dragée sweet cheesecake. Macaroon caramels pie cookie gummi bears. Ice cream jelly-o toffee cookie gingerbread cookie. Soufflé fruitcake jelly-o jelly chupa chups jelly beans. Dragée marzipan pastry macaroon oat cake muffin soufflé topping liquorice. Jelly-o chocolate cake lollipop.</p>
<p>Sugar plum muffin cookie pastry oat cake icing candy canes chocolate. Gummi bears chupa chups fruitcake dessert jelly. Muffin cookie ice cream soufflé pastry lollipop gingerbread sweet. Unerdwear.com bonbon candy marzipan bonbon gummies chocolate cake gummi bears powder. Unerdwear.com tart halvah chocolate cake dragée liquorice. Sugar plum chocolate bar pastry liquorice dragée jelly powder. Jelly tootsie roll applicake caramels. Marzipan candy tootsie roll donut. Gummies ice cream macaroon applicake.</p>
</div>
</section>
<section>
<div class="container">
<h1>Sugar rush, oh my...</h1>
<p>Cupcake ipsum dolor sit amet lollipop. Macaroon candy cotton candy bear claw macaroon carrot cake pastry icing dessert. Cupcake pastry tart sesame snaps lollipop donut pie. Cookie apple pie toffee lemon drops jelly beans cheesecake sweet roll. Jelly-o soufflé donut candy canes wafer dragée sweet cheesecake. Macaroon caramels pie cookie gummi bears. Ice cream jelly-o toffee cookie gingerbread cookie. Soufflé fruitcake jelly-o jelly chupa chups jelly beans. Dragée marzipan pastry macaroon oat cake muffin soufflé topping liquorice. Jelly-o chocolate cake lollipop.</p>
<p>Sugar plum muffin cookie pastry oat cake icing candy canes chocolate. Gummi bears chupa chups fruitcake dessert jelly. Muffin cookie ice cream soufflé pastry lollipop gingerbread sweet. Unerdwear.com bonbon candy marzipan bonbon gummies chocolate cake gummi bears powder. Unerdwear.com tart halvah chocolate cake dragée liquorice. Sugar plum chocolate bar pastry liquorice dragée jelly powder. Jelly tootsie roll applicake caramels. Marzipan candy tootsie roll donut. Gummies ice cream macaroon applicake.</p>
</div>
</section>
</div>
</div><!-- #main -->
<footer>
<div id="info-bar">
<div class="container clearfix">
<span class="all-tutorials"><a href="http://www.callmenick.com/tutorials">← all tutorials</a></span>
<span class="back-to-tutorial"><a href="http://www.callmenick.com/tutorials/create-an-animated-resizing-header-on-scroll">back to the tutorial</a></span>
</div>
</div><!-- /#top-bar -->
</footer><!-- /footer -->
</div><!-- /#wrapper -->
<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>
在哪里包含index.html <head/> 类帮助器函数放入ReactJS组件？
[英]Where to include index.html <head/> class helper functions into ReactJS Component?
如何在 React 的 index.html 文件中正确包含 css 文件？
[英]How can I properly include a css file in my index.html file in React?
Bower 是否应该自动包含库 js 和 css 文件，以便它们不需要在 index.html 中列出
[英]Should Bower automatically include library js and css files so they don't need to be listed in the index.html
在反应中，如何更改链接在 index.html 头部的 CSS 文件？
[英]in react, how to change CSS files linked in the head of index.html?
使用grunt自动将本地* .js和* .css文件引用到index.html
[英]Automatic reference of local *.js and *.css files into index.html with grunt
如何使用HTML Webpack插件将文件加载器所需的CSS文件包含到index.html中
[英]how to include css file required with file loader into index.html using html webpack plugin
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
在Ionic index.html中包含jQuery的位置
在哪里包含index.html <head/> 类帮助器函数放入ReactJS组件？
如何在 React 的 index.html 文件中正确包含 css 文件？
Bower 是否应该自动包含库 js 和 css 文件，以便它们不需要在 index.html 中列出
如何将2个JS文件连接到index.html [reactjs]
AngularJS App：如何将.js文件包含到index.html中
在反应中，如何更改链接在 index.html 头部的 CSS 文件？
使用grunt自动将本地* .js和* .css文件引用到index.html
ReactJS 不加载 index.html 文件
如何使用HTML Webpack插件将文件加载器所需的CSS文件包含到index.html中
相关标签