11

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!

Varis Darasirikul
  • 3,907
  • 9
  • 40
  • 75

1 Answers1

6

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.

Elliot Larson
  • 10,669
  • 5
  • 38
  • 57
  • I'm having a hard time getting this to work with `less` files after compilation. Do you happen to know if there are any caveats for precompiled stylesheets? – aviemet Dec 16 '18 at 23:07