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

User · Answer

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.

User · Answer

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

User · Answer

The following imports an external CSS file in a React component and outputs the CSS rules in the  lt head   gt  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

User · Answer

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

User · Answer

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

User · Answer

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  lt div className  styles table  gt               lt div className  styles row  gt                   lt div className  styles cell  gt A0 lt  div gt                   lt div className  styles cell  gt B0 lt  div gt               lt  div gt           lt  div gt             Rendering the Component    lt div class  table  table   32osj  gt       lt div class  table  row   2w27N  gt           lt div class  table  cell   2w27N  gt A0 lt  div gt           lt div class  table  cell   1oVw5  gt B0 lt  div gt       lt  div gt   lt  div gt

User · Answer

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  lt button className  styles error  gt Error Button lt  button gt

User · Answer

You can also use the required module   require    componentName css    const React   require  react

User · Answer

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

User · Answer

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

User · Answer

You can import your  css file in  jsx file   Here is an example -  import Content from     content content jsx

[javascript] How to import a CSS file in a React Component

Examples related to javascript

Examples related to reactjs

Examples related to relative-path