How to import css file for into Component .jsx file

Question

I am trying to use the react-day-pickers component like so but I can\'t figure out how to import the .css file and I keep getting the error:

Module parse fai         


        

Answer 1

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.

Answer 2

I used the following in my webpack config and it worked:

test: /\.css$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: true,
            },
          },
        ],

Answer 3

JSX is not CSS. In your main HTML file, just add a <link> element to the CSS file, and the DOM generated by React will use it.