how to require CSS file ?

[zhaolihang]

require('./index.css');
when build ,I got a error .

then another error happend when I add "css-loader" in webpack.config.js :
{
test: /.css$/,
loader: 'css-loader',
},

how to do it ?
thanks!

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

[koistya]

tools/webpack.config.js/module/loaders

{
  test: /\.css$/,
  loaders: [
    'isomorphic-style-loader',
    `css-loader?${DEBUG ? 'sourceMap&' : 'minimize&'}modules&localIdentName=` +
    `${DEBUG ? '[name]_[local]_[hash:base64:3]' : '[hash:base64:4]'}`
  ]
}

src/components/MyComponent/MyComponent.css

.root { color: red; }

src/components/MyComponent/MyComponent.js

import React, { PropTypes } from 'react';
import withStyles from 'isomorphic-style-loader/lib/withStyles';
import s from './MyComponent.css';

function MyComponent({ name }) {
  return <div className={s.root}>Hello, {name}!</div>
}

MyComponent.propTypes = { name: PropTypes.string.isRequired };

export default withStyles(MyComponent, s);

...

Or, just change test: /\.scss$/ to test: /\.s?css$/ in your webpack.config.js.

[zhaolihang]

Can I do like this: ?
import './MyComponent.css';
function MyComponent({ name }) { return <div className="root">Hello, {name}!</div> }
don`t use "withStyles" function

[b-gran]

@zhaolihang with the default settings, you can't do

import './MyComponent.css';
function MyComponent({ name }) { return <div className="root">Hello, {name}!</div> }

The default css loader changes class names so you can have per-component stylesheets.

webpack.config.js

`css-loader?${DEBUG ? 'sourceMap&' : 'minimize&'}modules&localIdentName=` +
    `${DEBUG ? '[name]_[local]_[hash:base64:3]' : '[hash:base64:4]'}`

That allows you to create a stylesheet for each component, and for example have a .root class in each file with no conflicts. The css loader will rename the .root class in each file, so there essentially won't be any global classes.

If you want your components to share css classes, you have a few options.

1. In your component .s?css files, import the .s?css files of other components you wish to inherit from. Then import the stylesheet in your React component and reference the classname using js.

SomeComponent.scss

...
@import '../App/App.scss';
.aStyleInheritedFromApp {
/* This class inherits from a class in App */
}

SomeComponent.jsx

import s from 'SomeComponent.scss';
function MyComponent({ name }) { return <div className={s.aStyleInheritedFromApp}>Hello, {name}!</div> }

2. If you need to use something like bootstrap and react-bootstrap, you may need to preserve the bootstrap class names. You can tell the css loader to do this, but if you have the loader preserve the class names of ALL of your stylesheets, you lose the benefits of having component-specific stylesheets.

<app-dir>/bootstrap/dist/css/bootstrap.css

/* Bootstrap css file with classes like .btn, .success, etc */

This loader will preserve the class names of .css files only, and generate unique .scss file names.

webpack.config.js

{
  test: /\.css$/,
  loaders: [
    'isomorphic-style-loader',
    `css-loader?${DEBUG ? 'sourceMap&' : 'minimize&'}modules&localIdentName=[local]`
  ]
},
{
  test: /\.scss$/,
  loaders: [
    'isomorphic-style-loader',
    `css-loader?${DEBUG ? 'sourceMap&' : 'minimize&'}modules&localIdentName=` +
    `${DEBUG ? '[name]_[local]_[hash:base64:3]' : '[hash:base64:4]'}`
  ]
}

If you take this approach, the following will work

BootstrapButton.jsx

function BootstrapButton({ text }) { return <a className="btn btn-primary">{ text }</a> }

[pickingausername]

But how can i override bootstrap class name issue #431 .

[b-gran]

If you use the following for a css loader, your stylesheets will behave just like you would expect them to if you had <link />ed to them from a html file.

webpack.config.js

...
{
  test: /\.scss$/,
  loaders: [
    'isomorphic-style-loader',
    `css-loader?${DEBUG ? 'sourceMap&' : 'minimize&'}modules&localIdentName=[local]`
  ]
},

Just apply the bootstrap css file to your app container and then in YourComponent.scss you can write things like

YourComponent.scss

.my-component-wrapper .btn.btn-primary {
    background: cyan;
}

to override the bootstrap styles.

[rsnider19]

@b-gran I am trying to get bootstrap styling to be isomorphic as well in order to avoid the FOUC that comes with importing the bootstrap styling in Client.js. I have added your css loader into my webpack.config.js, but I am not totally sure where to import the bootstrap.css now. I have tried in Html.js since that is the entry point as well as App.js since that is the main component, but I get this error:

SyntaxError: Unexpected token {
    at exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:414:25)
    at Object.Module._extensions..js (module.js:442:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:311:12)
    at Module.require (module.js:366:17)
    at require (module.js:385:17)
    at Object.<anonymous> (C:\...\build\webpack:\external "bootstrap\dist\css\bootstrap.css":1:1)
    at __webpack_require__ (C:\...\build\webpack:\webpack\bootstrap 77f8a1e55acf699538ba:19:1)
    at Object.<anonymous> (C:\...\build\server.js:2464:20)

I am new to react and webpack, so it might be something obvious that I don't quite understand.

[frenzzy]

Should be solved by #920. Please reopen if needed.