I'm trying to implement react-component/time-picker in a component of mine.
The imports seem to "work", but the component is not getting the styles it needs.
import TimePicker from 'rc-time-picker'
import 'rc-time-picker/assets/index.css'
I've dug around in the source files and found the message below that the css was "removed by extract-text-webpack-plugin". I don't know if this is normal or the cause of my problems.
/*!******************************************************!*\
!*** ./node_modules/rc-time-picker/assets/index.css ***!
\******************************************************/
/*! dynamic exports provided */
/***/ (function(module, exports) {
// removed by extract-text-webpack-plugin
I'm not a react expert, and the React app was set up via Rails / Webpacker by someone who has left the company.
I've found the the css is getting compiled fine into public/bundle-c9134289a37e525df9bab3bda8e77e4f.css without error.
So, my issue is that the CSS doesn't seem to be available on my page. I don't understand where imported CSS is supposed to go and how is it controlled? But, it seems like this CSS isn't going there.
Am I missing something obvious?
Edit 1:
config/webpack/loaders/less.js
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
test: /\.less$/,
use: ExtractTextPlugin.extract({
use: ['css-loader', 'less-loader']
})
}
config/webpack/environment.js
const { environment } = require('@rails/webpacker')
const less = require('./loaders/less')
environment.loaders.append('less', less)
module.exports = environment
Try adding
import 'rc-time-picker/assets/index.css'
To your app/javascript/packs/application.js file