Rails Webpacker 3.0 import CSS file is not working

Question

I am working Rails5 project with Webpacker in order to run React properly

But when import my css file inside my root component seems it is not working at all. Looking like stylesheet is not coming at all.

This is my root Component

import React from 'react'
import ReactDOM from 'react-dom'
import StartForm from './insurance_form/start_form'
//import PropTypes from 'prop-types'

import 'react-datepicker/dist/react-datepicker.css';
// not working

ReactDOM.render(
  <StartForm />,
  document.getElementById('start-form-index-container')
)

This my webpack/environment.js

const { environment } = require('@rails/webpacker')

const merge = require('webpack-merge')
const myCssLoaderOptions = {
    modules: true,
    sourceMap: true,
    localIdentName: '[name]__[local]___[hash:base64:5]'
}

const CSSLoader = environment.loaders.get('style').use.find(el => el.loader === 'css-loader')

CSSLoader.options = merge(CSSLoader.options, myCssLoaderOptions)

module.exports = environment

So how i can make imported css working well with webpacker?

Thanks!

Answer 1

I had a similar problem just now and found a solution. Hopefully this helps someone else.

I'm using webpacker 3.4.3. It uses the extract-text-webpack-plugin to auto-generate a CSS pack containing the imported styles. It takes the same name as your JS pack. So if your JS pack is hello_react.jsx, and in it you import some CSS like so: import "./Hello.css";, the styles in Hello.css are included in a CSS pack called hello_react.css. In your Rails view you can add something like <%= stylesheet_pack_tag('hello_react.css') %>, and the styles should work.

For more info, see the Link styles from your Rails view section of the Webpacker CSS docs.