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
– Steeve Pitis, Commented Oct 4, 2016 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
– venter, Commented Oct 4, 2016 at 13:41
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
– Sadanand, Commented May 3, 2020 at 3:06

Edgar · Accepted Answer · 2019-08-19 22:54:20Z

284

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, 2019 at 22:54

Edgar

7,00811 gold badges38 silver badges75 bronze badges

answered Sep 24, 2017 at 2:47

code4jhon

6,08410 gold badges44 silver badges63 bronze badges

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

4 Comments

JGleason Over a year ago

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 .

Kira Over a year ago

Or, use react-helmet and inject the css (if its a url) in the <head> tag

rbansal Over a year ago

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.

Bitzu Over a year ago

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

halfer · Accepted Answer · 2020-04-14 17:46:31Z

69

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, 2020 at 17:46

halfer

20.2k20 gold badges110 silver badges207 bronze badges

answered Oct 4, 2016 at 13:34

Alexandr Lazarev

13k4 gold badges40 silver badges47 bronze badges

7 Comments

venter Over a year ago

I'm not allowed to import another module into this project. Is their another solution only working with reactjs or native js?

venter Over a year ago

So i think i have to use something like this: HTMLElement.style

Alexandr Lazarev Over a year ago

It looks a little bit ugly. Why aren't you allowed to add changes in bundle building?

venter Over a year ago

It's a postprocessing for a workship about reactjs and we're told to solve the requirements with the modules included during workship

Alexandr Lazarev Over a year ago

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.

|

Mihir Patel · Accepted Answer · 2016-10-04 13:33:16Z

54

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 4, 2016 at 13:33

Mihir Patel

2,4324 gold badges26 silver badges38 bronze badges

5 Comments

Mihir Patel Over a year ago

I would add part 1 as the answer below. And you can follow my answer to test your component.

venter Over a year ago

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

Alexandr Lazarev Over a year ago

css modules should be installed apart, github.com/css-modules/css-modules

Sonu Bamniya Over a year ago

And how can I write media query for such type CSS, any Idea?

Bitzu Over a year ago

css modules is a different thing and has a different syntax. please don't confuse people.

Arsen Kazydub · Accepted Answer · 2018-03-19 09:34:39Z

28

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, 2018 at 9:34

answered Mar 19, 2018 at 9:25

Arsen Kazydub

5,6607 gold badges40 silver badges51 bronze badges

3 Comments

Anton Danylchenko Over a year ago

And I use babel to run watcher. Maybe it doesn't see into the webpack.config.js file at all

Arsen Kazydub Over a year ago

Have you installed css-loader? Also I don't see your webpack.config.js.

Ari Over a year ago

You can add more module rules in object format as rules array's value.

halfer · Accepted Answer · 2020-04-14 17:53:44Z

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, 2020 at 17:53

halfer

20.2k20 gold badges110 silver badges207 bronze badges

answered Sep 14, 2019 at 23:21

Ugur Yilmaz

5298 silver badges18 bronze badges

1 Comment

Maulik Sakhida Over a year ago

stackoverflow.com/questions/53572200/… Alternate solution

Awais Niaz · Accepted Answer · 2022-01-15 04:57:52Z

5

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, 2022 at 4:57

Awais Niaz

491 silver badge4 bronze badges

1 Comment

Community Over a year ago

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.

Juan · Accepted Answer · 2019-07-23 20:12:41Z

2

You can also use the required module.

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

answered Jul 23, 2019 at 20:12

Juan

5374 silver badges10 bronze badges

Comments

glortho · Accepted Answer · 2018-12-21 15:28:13Z

1

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.

answered Dec 21, 2018 at 15:28

glortho

13.2k8 gold badges51 silver badges46 bronze badges

Comments

halfer · Accepted Answer · 2020-04-14 17:54:22Z

1

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]'
                }
            }
        ]
    }

edited Apr 14, 2020 at 17:54

halfer

20.2k20 gold badges110 silver badges207 bronze badges

answered Jun 7, 2018 at 12:53

Bertwin Romero

211 bronze badge

Comments

nick · Accepted Answer · 2020-08-04 11:12:26Z

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

Ramsha Omer · Accepted Answer · 2019-10-29 09:47:22Z

-4

You can import your .css file in .jsx file

Here is an example -

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

edited Oct 29, 2019 at 9:47

Ramsha Omer

1,0621 gold badge8 silver badges28 bronze badges

answered Oct 29, 2019 at 8:19

Saurabh Ramchandrarao Kulkarni

413 bronze badges

Collectives™ on Stack Overflow

How to import a CSS file in a React Component

11 Answers 11

4 Comments

7 Comments

5 Comments

3 Comments

1 Comment

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

11 Answers 11

4 Comments

7 Comments

5 Comments

3 Comments

1 Comment

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related