How to Import CSS File for into Component .Jsx File

How to import a CSS file in a React Component

You don't even have to name it if you don't need to:

e.g.

import React from 'react';
import './App.css';

see a complete example here (Build a JSX Live Compiler as a React Component).

How to import css file for into Component .jsx file

How are you compiling this? If it's webpack, you'd probably need to bring in the style-loader and include something like this in the module.loaders array in your webpack config:

{
  test: /\.css$/,
  loader: "style!css"
}

---

Update: With the webpack.config.js now provided, we can confirm it needed a change in the module.loaders array. OP was using a less loader and only checking for .less files, so the exact loader object should read:

{
  test: /\.(less|css)$/,
  loader: 'style!css!less'
}

As suggested by @Q Liu. Leaving the original bit as if someone comes here with an error importing a .css file, it's likely what they need.

Import CSS in a react app

You can just import the css file like the below in your component

import './header.css';

Imagine your header.css file looks like 

.header {
    background-color:  rgb(49, 118, 197);
    height:100px;
    border:10px solid red;
}

To use the style, you can use the class like ,

<div className="header">Hello World</div>

Hope this helps :)

Importing css file in jsx using relative path

import '../../custom_styles/sidebar.css'; in your mypage.js file.

../ means that you're going one level up from your current file. In your case you have to move two ups.

Cant Import CSS files into React Project

Modifie your webpack.config.js to this and import your css file on your App component like this import './file.css'; (assuming that the css file is in the same directory as your App component)

module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ["babel-loader"],            
      },
      {
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader' ]
      }
    ]
  },

  resolve: {
    extensions: ['*', '.js', '.jsx']
  },
output: {
  path: __dirname + '/dist',
  publicPath: '/',
  filename: 'bundle.js'
},
devServer: {
  contentBase: './dist'
}
};

How to Import CSS Module React and JSX? ( Error )

I think it is a typo:

// remove style prop or it will be converted to style={true}
<div className="col-md-6 offset-md-3">
// use "style" prop instead of "styles"
  <p style={styles.boilerplate}>some boilterplate text</p>
</div>

CSS classes are being read from files which are not imported in the component

The class which gets applied doesn't come from the .css file imported
at the top of the .jsx file. Is this the expected behaviour?

Yes, because the CSS rules that are defined in any of the imported files are not specifically scoped to their components.

Obviously I can give unique names to each css class but I was
wondering if there was a way to fix that.

Giving unique names manually is one way to fix that. But you can use things like CSS Modules etc.

Unable to import .css stylesheet in my JSX component

Got solution still answering here, it will help some people who needs to work react with grunt and babel. If you need to import your css file in your component like

import './Container.css';

you need this plugin : https://github.com/guybedford/require-css

by using this you can import it like :

import 'css!./Button_Styles.css';

this answer for people who are using grunt and require , not webpack and css-modules.

---

Related Topics