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 · Answer 1 · 2017-01-18T03:29:15.810

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 '17 at 03:29

answered Jan 18 '17 at 03:23

Assan

428
1
4
10

what is the difference btw css-loader and style-loader? css-loader make sense why would I need another one? – Nately Jamerson Jan 18 '17 at 03:51
`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. – Assan Jan 18 '17 at 03:54
What does it mean by ` If your CSS did not have any references to other resources`? – Nately Jamerson Jan 18 '17 at 05:10
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. – Assan Jan 18 '17 at 05:13
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? – Nately Jamerson Jan 18 '17 at 05:28
Well, that's a different question. I suggest looking at the documentation. Forget about raw-loader for CSS, I mentioned it just to emphasize what css-loader does. – Assan Jan 18 '17 at 05:31
Here: [Webpack style-loader vs css-loader](http://stackoverflow.com/questions/34039826/webpack-style-loader-vs-css-loader) – Assan Jan 18 '17 at 05:38

score 0 · Answer 2 · answered Feb 02 '19 at 19:49

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'
} 
*/

import css using webpack in react

2 Answers2