https://create-react-app.dev/assets/js/f87328ee.c0f2b3cc.js

1"use strict";(self.webpackChunkcra_docs=self.webpackChunkcra_docs||[]).push([[7743],{876:function(e,t,n){n.d(t,{Zo:function(){return p},kt:function(){return f}});var r=n(2784);function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function a(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function i(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?a(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):a(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function s(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var l=r.createContext({}),c=function(e){var t=r.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},p=function(e){var t=c(e.components);return r.createElement(l.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},u=r.forwardRef((function(e,t){var n=e.components,o=e.mdxType,a=e.originalType,l=e.parentName,p=s(e,["components","mdxType","originalType","parentName"]),u=c(n),f=o,m=u["".concat(l,".").concat(f)]||u[f]||d[f]||a;return n?r.createElement(m,i(i({ref:t},p),{},{components:n})):r.createElement(m,i({ref:t},p))}));function f(e,t){var n=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var a=n.length,i=new Array(a);i[0]=u;var s={};for(var l in t)hasOwnProperty.call(t,l)&&(s[l]=t[l]);s.originalType=e,s.mdxType="string"==typeof e?e:o,i[1]=s;for(var c=2;c<a;c++)i[c]=n[c];return r.createElement.apply(null,i)}return r.createElement.apply(null,n)}u.displayName="MDXCreateElement"},1566:function(e,t,n){n.r(t),n.d(t,{frontMatter:function(){return s},contentTitle:function(){return l},metadata:function(){return c},toc:function(){return p},default:function(){return u}});var r=n(7896),o=n(1461),a=(n(2784),n(876)),i=["components"],s={id:"adding-a-stylesheet",title:"Adding a Stylesheet",sidebar_label:"Adding Stylesheets"},l=void 0,c={unversionedId:"adding-a-stylesheet",id:"adding-a-stylesheet",title:"Adding a Stylesheet",description:"This project setup uses webpack for handling all assets. webpack offers a custom way of \u201cextending\u201d the concept of import beyond JavaScript. To express that a JavaScript file depends on a CSS file, you need to import the CSS from the JavaScript file:",source:"@site/../docs/adding-a-stylesheet.md",sourceDirName:".",slug:"/adding-a-stylesheet",permalink:"/docs/adding-a-stylesheet",editUrl:"https://github.com/facebook/create-react-app/edit/main/docusaurus/website/../docs/adding-a-stylesheet.md",tags:[],version:"current",lastUpdatedBy:"Lewis Llobera",lastUpdatedAt:1581604862,formattedLastUpdatedAt:"2/13/2020",frontMatter:{id:"adding-a-stylesheet",title:"Adding a Stylesheet",sidebar_label:"Adding Stylesheets"},sidebar:"docs",previous:{title:"HTTPS in Development",permalink:"/docs/using-https-in-development"},next:{title:"Adding CSS Modules",permalink:"/docs/adding-a-css-modules-stylesheet"}},p=[{value:"<code>Button.css</code>",id:"buttoncss",children:[],level:2},{value:"<code>Button.js</code>",id:"buttonjs",children:[],level:2}],d={toc:p};function u(e){var t=e.components,n=(0,o.Z)(e,i);return(0,a.kt)("wrapper",(0,r.Z)({},d,n,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("p",null,"This project setup uses ",(0,a.kt)("a",{parentName:"p",href:"https://webpack.js.org/"},"webpack")," for handling all assets. webpack offers a custom way of \u201cextending\u201d the concept of ",(0,a.kt)("inlineCode",{parentName:"p"},"import")," beyond JavaScript. To express that a JavaScript file depends on a CSS file, you need to ",(0,a.kt)("strong",{parentName:"p"},"import the CSS from the JavaScript file"),":"),(0,a.kt)("h2",{id:"buttoncss"},(0,a.kt)("inlineCode",{parentName:"h2"},"Button.css")),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-css"},".Button {\n  padding: 20px;\n}\n")),(0,a.kt)("h2",{id:"buttonjs"},(0,a.kt)("inlineCode",{parentName:"h2"},"Button.js")),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},"import React, { Component } from 'react';\nimport './Button.css'; // Tell webpack that Button.js uses these styles\n\nclass Button extends Component {\n  render() {\n    // You can use them as regular CSS styles\n    return <div className=\"Button\" />;\n  }\n}\n")),(0,a.kt)("p",null,(0,a.kt)("strong",{parentName:"p"},"This is not required for React")," but many people find this feature convenient. You can read about the benefits of this approach ",(0,a.kt)("a",{parentName:"p",href:"https://medium.com/seek-blog/block-element-modifying-your-javascript-components-d7f99fcab52b"},"here"),". However you should be aware that this makes your code less portable to other build tools and environments than webpack."),(0,a.kt)("p",null,"In development, expressing dependencies this way allows your styles to be reloaded on the fly as you edit them. In production, all CSS files will be concatenated into a single minified ",(0,a.kt)("inlineCode",{parentName:"p"},".css")," file in the build output."),(0,a.kt)("p",null,"If you are concerned about using webpack-specific semantics, you can put all your CSS right into ",(0,a.kt)("inlineCode",{parentName:"p"},"src/index.css"),". It would still be imported from ",(0,a.kt)("inlineCode",{parentName:"p"},"src/index.js"),", but you could always remove that import if you later migrate to a different build tool."))}u.isMDXComponent=!0}}]);