How to import a CSS file in a React Component

Question

I want to import a CSS file into a react component.

I've tried import disabledLink from "../../../public/styles/disabledLink"; but I get the error below;

Module not found: Error: Cannot resolve 'file' or 'directory' ../../../public/styles/disabledLink in c:\Users\User\Documents\pizza-app\client\src\components @ ./client/src/components/ShoppingCartLink.js 19:20-66 Hash: 2d281bb98fe0a961f7c4 Version: webpack 1.13.2

C:\Users\User\Documents\pizza-app\client\public\styles\disabledLink.css is the location of the CSS file I'm trying to load.

To me it seems like import is not looking up the correct path.

I thought with ../../../ it would start to look up the path three folder layers above.

C:\Users\User\Documents\pizza-app\client\src\components\ShoppingCartLink.js is the location of the file that should import the CSS file.

What am I doing wrong and how can I fix it?

Hey what's up :D, it's looks like only two folder above (components & src) — Steeve Pitis, Oct 04 '16 at 13:33
Hey, you're right but it still dosn't work. I noticed that i can't use import, because i can't use export within a CSS file — venter, Oct 04 '16 at 13:41
using this way https://stackoverflow.com/questions/39926493/classname-styles-not-working-in-react/57667815#57667815 — anson, Aug 27 '19 at 06:37
I am getting error -> @media only screen and (min-width:320px) and (max-width:640px) { ^ SyntaxError: Invalid or unexpected token at Module._compile (internal/modules/cjs/loader.js:723:23) — Sadanand, May 03 '20 at 03:06

score 261 · Answer 1 · edited Aug 19 '19 at 22:54

261

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).

edited Aug 19 '19 at 22:54

Edgar

6,022
8
33
66

answered Sep 24 '17 at 02:47

code4jhon

5,725
9
40
60

11

Doesn't work for me, when I try running mocha with babel register I get... I:\....css:1 (function (exports, require, module, __filename, __dirname) { .filter-bg { ^ SyntaxError: Unexpected token . – JGleason Oct 24 '18 at 20:14
3

Or, use react-helmet and inject the css (if its a url) in the tag – Kira Jan 03 '19 at 16:57
3

I am importing css files `import ./App.css` but it adds an entry into head. Is it possible to scope the import of App.css to App component only? I know there stuff like `App.module.css` but I am importing an antd css file for antd component so I can not really change the name of the file. – rbansal Aug 16 '22 at 09:56
this is the problem with create-react-app, it does things people expect vanilla react does, in order for react to build css, depending on what bundler you use you need a css loader or 2 – Bitzu Jan 31 '23 at 19:23

score 65 · Accepted Answer · edited Apr 14 '20 at 17:46

65

You need to use css-loader when creating bundle with webpack.

Install it:

npm install css-loader --save-dev

And add it to loaders in your webpack configs:

module.exports = {
  module: {
    loaders: [
      { test: /\.css$/, loader: "style-loader!css-loader" },
      // ...
    ]
  }
};

After this, you will be able to include css files in js.

edited Apr 14 '20 at 17:46

halfer

19,824
17
99
186

answered Oct 04 '16 at 13:34

Alexandr Lazarev

12,554
4
38
47

3

I'm not allowed to import another module into this project. Is their another solution only working with reactjs or native js? – venter Oct 04 '16 at 13:43
So i think i have to use something like this: HTMLElement.style – venter Oct 04 '16 at 14:02
It looks a little bit ugly. Why aren't you allowed to add changes in bundle building? – Alexandr Lazarev Oct 04 '16 at 14:04
It's a postprocessing for a workship about reactjs and we're told to solve the requirements with the modules included during workship – venter Oct 04 '16 at 14:18
Ok, but just wanted to mention that fetching style tags isn't *importing* css files as you've asked in your question. These are 2 different issues. – Alexandr Lazarev Oct 04 '16 at 14:22
It doesn't work for me after adding this module. It shows an npm error. – koustubh Feb 16 '18 at 06:43
What do I use if I'm only using Babel for JSX transpilation to JavaScript? Is there a Babel plugin to load CSS stylesheet files using ES6 module imports, or do I have to update the whole project to use Webpack? – Garret Wilson Mar 22 '23 at 20:12

score 52 · Answer 3 · answered Oct 04 '16 at 13:33

52

I would suggest using CSS Modules:

React

import React from 'react';
import styles from './table.css';

export default class Table extends React.Component {
    render () {
        return <div className={styles.table}>
            <div className={styles.row}>
                <div className={styles.cell}>A0</div>
                <div className={styles.cell}>B0</div>
            </div>
        </div>;
    }
}

Rendering the Component:

<div class="table__table___32osj">
    <div class="table__row___2w27N">
        <div class="table__cell___2w27N">A0</div>
        <div class="table__cell___1oVw5">B0</div>
    </div>
</div>

answered Oct 04 '16 at 13:33

Mihir Patel

2,202
3
23
36

I would add part 1 as the answer below. And you can follow my answer to test your component. – Mihir Patel Oct 04 '16 at 13:41
4

If tried this out and it dosn't works. I've tried to include it like this: `import styles from "./disabledLink.css";` and get the following error: Module not found: Error: Cannot resolve 'file' or 'directory' ./disabledLink.css in c:\Users\Basti Kluth\Documents\pizza-app\client\src\components @ ./client/src/components/ShoppingCartLink.js 19:20-49 – venter Oct 04 '16 at 13:48
2

css modules should be installed apart, https://github.com/css-modules/css-modules – Alexandr Lazarev Oct 04 '16 at 13:54
1

And how can I write media query for such type CSS, any Idea? – Sonu Bamniya Jul 13 '18 at 06:37
1

css modules is a different thing and has a different syntax. please don't confuse people. – Bitzu Jan 31 '23 at 19:24

Arsen K. · Answer 4 · 2018-03-19T09:34:39.577

26

The following imports an external CSS file in a React component and outputs the CSS rules in the <head /> of the website.

Install Style Loader and CSS Loader:

npm install --save-dev style-loader
npm install --save-dev css-loader

In webpack.config.js:

module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [ 'style-loader', 'css-loader' ]
            }
        ]
    }
}

In a component file:

import './path/to/file.css';

edited Mar 19 '18 at 09:34

answered Mar 19 '18 at 09:25

Arsen K.

5,494
7
38
51

1

And I use babel to run watcher. Maybe it doesn't see into the webpack.config.js file at all – Anton Danilchenko Mar 27 '18 at 18:25
Have you installed css-loader? Also I don't see your webpack.config.js. – Arsen K. Mar 27 '18 at 19:12
1

You can add more module rules in object format as `rules` array's value. – Ari Jan 20 '19 at 04:03

score 12 · Answer 5 · answered Feb 19 '20 at 13:45

12

CSS Modules let you use the same CSS class name in different files without worrying about naming clashes.

Button.module.css

.error {
  background-color: red;
}

another-stylesheet.css

.error {
  color: red;
}

Button.js

import React, { Component } from 'react';
import styles from './Button.module.css'; // Import css modules stylesheet as styles
import './another-stylesheet.css'; // Import regular stylesheet
class Button extends Component {
  render() {
    // reference as a js object
    return <button className={styles.error}>Error Button</button>;
  }
}

answered Feb 19 '20 at 13:45

Amaresh Tiwari

947
13
36

1

do we need to do anything to get this working? – Abhishek Sharma Jan 09 '21 at 18:04
10

@AbhishekSharma..The most important thing to note about the solution, is to name your css file as "something.module.css" . That module part is all that makes it work. – Arindam Roychowdhury Apr 03 '21 at 22:30
Does it only work for css classes? What about css ids? – Sebastian Nielsen Jan 22 '22 at 22:27
stop confusing create-react-app with react library. – Bitzu Jan 31 '23 at 19:25

score 7 · Answer 6 · edited Apr 14 '20 at 17:53

7

The solutions above are completely changed and deprecated. If you want to use CSS modules (assuming you imported css-loaders) and I have been trying to find an answer for this for such a long time and finally did. The default webpack loader is quite different in the new version.

In your webpack, you need to find a part starting with cssRegex and replace it with this;

{
  test: cssRegex,
  exclude: cssModuleRegex,
  use: getStyleLoaders({
      importLoaders: 1,
      modules: true,
      localIdentName: '[name]__[local]__[hash:base64:5]'
  }),
}

edited Apr 14 '20 at 17:53

halfer

19,824
17
99
186

answered Sep 14 '19 at 23:21

Ugur Yilmaz

469
6
17

https://stackoverflow.com/questions/53572200/react-css-class-name-import-not-working Alternate solution – Maulik Sakhida Oct 25 '19 at 12:55

score 4 · Answer 7 · answered Jan 15 '22 at 04:57

4

You can import css file if css file reside in a same folder where you want to import than just simple try this

import './styles.css'

if css file is far away from our component that navigate that place where file is reside and use this like

import '../mainstyles/styles.css'

answered Jan 15 '22 at 04:57

Awais Niaz

41
3

1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jan 15 '22 at 07:32

score 1 · Answer 8 · edited Apr 14 '20 at 17:54

Install Style Loader and CSS Loader:

npm install --save-dev style-loader
npm install --save-dev css-loader

Configure webpack

module: {
        loaders: [
            {
                test: /\.css$/,
                loader: 'style-loader'
            }, {
                test: /\.css$/,
                loader: 'css-loader',
                query: {
                    modules: true,
                    localIdentName: '[name]__[local]___[hash:base64:5]'
                }
            }
        ]
    }

score 1 · Answer 9 · answered Dec 21 '18 at 15:28

In cases where you just want to inject some styles from a stylesheet into a component without bundling in the whole stylesheet I recommend https://github.com/glortho/styled-import. For example:

const btnStyle = styledImport.react('../App.css', '.button')

// btnStyle is now { color: 'blue' } or whatever other rules you have in `.button`.

NOTE: I am the author of this lib, and I built it for cases where mass imports of styles and CSS modules are not the best or most viable solution.

score 1 · Answer 10 · answered Jul 23 '19 at 20:12

1

You can also use the required module.

require('./componentName.css');
const React = require('react');

answered Jul 23 '19 at 20:12

Juan

477
4
8

score 0 · Answer 11 · answered Aug 04 '20 at 11:12

Using extract-css-chunks-webpack-plugin and css-loader loader work for me, see below:

webpack.config.js Import extract-css-chunks-webpack-plugin

const ExtractCssChunks = require('extract-css-chunks-webpack-plugin');

webpack.config.js Add the css rule, Extract css Chunks first then the css loader css-loader will embed them into the html document, ensure css-loader and extract-css-chunks-webpack-plugin are in the package.json dev dependencies

rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: ExtractCssChunks.loader,
          },
          'css-loader',
        ],
      }
]

webpack.config.js Make instance of the plugin

plugins: [
    new ExtractCssChunks({
      // Options similar to the same options in webpackOptions.output
      // both options are optional
      filename: '[name].css',
      chunkFilename: '[id].css'
    })
  ]

And now importing css is possible And now in a tsx file like index.tsx i can use import like this import './Tree.css' where Tree.css contains css rules like

body {
    background: red;
}

My app is using typescript and this works for me, check my repo for the source : https://github.com/nickjohngray/staticbackeditor

score -3 · Answer 12 · edited Oct 29 '19 at 09:47

-3

You can import your .css file in .jsx file

Here is an example -

import Content from '../content/content.jsx';

edited Oct 29 '19 at 09:47

Ramsha Omer

1,022
1
8
28

answered Oct 29 '19 at 08:19

Saurabh Ramchandrarao Kulkarni

43
3

How to import a CSS file in a React Component

12 Answers12

Linked

Related