import css using webpack in react

Question

I was from angularjs, now picking up react. Even I was using angular 1.x which is already component based, but it still has template. But in react the file structure and the way we use to code front end has changed, like instead of spiting files by pages, u make files by component now. It promotes reusability but does that means how we apply the css also changed?

I saw this import { navBar } from 'styles/navbar.css' in navBar.jsx. Hmm how does css work together with JSX? doest navBar css load that file? What webpack plugin is needed for that? does it come from default? I'm using react-create-app by facebook so I didn't know much about config.

Assan · Accepted Answer · 2017-01-18 03:29:15Z

1

You use css-loader and style-loader to include CSS files in your webpack bundle. By default it generates some JavaScript code that creates a style element with the contents of the imported CSS file and appends it to the head element in your index.html.

So you can definitely use external CSS files to style your React components, just make sure that every CSS class is properly namespaced to avoid naming conflicts with the classes of other components.

For example you could adopt the BEM naming scheme. If your component is called NavBar, then the root element of that component might have a className of x-nav-bar (the x prefix is there to avoid clashing with frameworks like bootstrap), and all child elements, if they need to be styled, will then have class names like x-nav-bar__${childName}.

edited Jan 18, 2017 at 3:29

answered Jan 18, 2017 at 3:23

Assan

4281 gold badge4 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Nately Jamerson Over a year ago

what is the difference btw css-loader and style-loader? css-loader make sense why would I need another one?

Assan Over a year ago

css-loader imports the CSS file, and all its dependencies (such as url references), and generates a CSS string, style-loader then injects that string in your index.html when you bundle your app. If your CSS did not have any references to other resources, then you could use raw-loader instead of css-loader. But style-loader is required if you want the styles to be injected into the DOM.

Nately Jamerson Over a year ago

What does it mean by ` If your CSS did not have any references to other resources`?

Assan Over a year ago

Your CSS can have import statements, or include images or font files via url, like this: background-image: url('./image.png');. If you use css-loader, then webpack will automatically include the referenced image in your bundle. raw-loader doesn't do that, it'll treat the CSS as plain text, so the references will not be parsed.

Nately Jamerson Over a year ago

of course I use url in my css, what's the point of raw-loader? I don't see the use case of writing css that don't allow the use of image path. What happens if I use styler-loader without css-loader? if they are dependent to each other, can't they just be in package?

|

felixmosh · Accepted Answer · 2019-02-02 19:49:40Z

This kind of import { navBar } from 'styles/navbar.css' is not relevant to JSX but to css-loader. This is a webpack loader that handles css, and it supports cssModules, that allows you to encapsulate selector names in order to avoid css leaks.

So, shortly, that import exposes an object with mapping between your selector to unique string (usually an a hash).

For example:

// styles.css
.foo {
   color: red;
}

.bar {
   color: green;
}


// Component.jsx
import styles from './styles.css';

console.log(styles);
/* This will print something like
{
  foo: '_h234jh',
  bar: '_234m23'
} 
*/

Collectives™ on Stack Overflow

import css using webpack in react

2 Answers 2

7 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Linked

Related