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?

Answer 1

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

eg

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

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

Answer 2

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.

Answer 3

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>

Answer 4

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';

Answer 5

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

Answer 6

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>;
  }
}

Answer 7

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

Answer 8

You can also use the required module.

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

Answer 9

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.

Answer 10

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

Answer 11

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'

Answer 12

You can import your .css file in .jsx file

Here is an example -

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

How to import a CSS file in a React Component

Question

12 answers

solution1
196 ACCPTED 2017-09-24 02:47:32

solution2
58 2016-10-04 13:34:13

solution3
39 2016-10-04 13:33:16

solution4
21 2018-03-19 09:25:12

solution5
6 2019-09-14 23:21:50

solution6
3 2020-02-19 13:45:42

solution7
1 2018-06-07 12:53:00

solution8
1 2019-07-23 20:12:41

solution9
0 2018-12-21 15:28:13

solution10
0 2020-08-04 11:12:26

solution11
0 2022-01-15 04:57:52

solution12
-2 2019-10-29 08:19:05

How to import a CSS file in a React Component

Question

12 answers

solution1 196 ACCPTED 2017-09-24 02:47:32

solution2 58 2016-10-04 13:34:13

solution3 39 2016-10-04 13:33:16

solution4 21 2018-03-19 09:25:12

solution5 6 2019-09-14 23:21:50

solution6 3 2020-02-19 13:45:42

solution7 1 2018-06-07 12:53:00

solution8 1 2019-07-23 20:12:41

solution9 0 2018-12-21 15:28:13

solution10 0 2020-08-04 11:12:26

solution11 0 2022-01-15 04:57:52

solution12 -2 2019-10-29 08:19:05

solution1
196 ACCPTED 2017-09-24 02:47:32

solution2
58 2016-10-04 13:34:13

solution3
39 2016-10-04 13:33:16

solution4
21 2018-03-19 09:25:12

solution5
6 2019-09-14 23:21:50

solution6
3 2020-02-19 13:45:42

solution7
1 2018-06-07 12:53:00

solution8
1 2019-07-23 20:12:41

solution9
0 2018-12-21 15:28:13

solution10
0 2020-08-04 11:12:26

solution11
0 2022-01-15 04:57:52

solution12
-2 2019-10-29 08:19:05