React 导入 css 不可用

Question

我正在尝试在我的组件中实现 react-component/time-picker。

导入似乎 "work"，但组件未获得所需的样式。

import TimePicker from 'rc-time-picker'
import 'rc-time-picker/assets/index.css'

我仔细研究了源文件，发现下面的消息表明 css 是“被 extract-text-webpack-plugin 删除”。我不知道这是正常现象还是我的问题的原因。

/*!******************************************************!*\
  !*** ./node_modules/rc-time-picker/assets/index.css ***!
  \******************************************************/
/*! dynamic exports provided */
/***/ (function(module, exports) {

// removed by extract-text-webpack-plugin

我不是 React 专家，React 应用程序是由已离开公司的人通过 Rails / Webpacker 设置的。

我发现 css 可以很好地编译成 public/bundle-c9134289a37e525df9bab3bda8e77e4f。css 没有错误。

所以，我的问题是 CSS 在我的页面上似乎不可用。我不明白 imported CSS 应该去哪里，它是如何控制的？但是，这 CSS 似乎不会去那里。

我是不是遗漏了什么明显的东西？

编辑 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

Answer 1

试试这个：

const ExtractTextPlugin = require('extract-text-webpack-plugin');
const extractCSS = new ExtractTextPlugin('yourfile.min.css');

module.exports = {
  test: /\.less$/,
  use: extractCSS.extract({
    use: ['css-loader', 'less-loader']
  })
}

Answer 2

尝试添加

import 'rc-time-picker/assets/index.css'

到您的 app/javascript/packs/application.js 文件

文档：rails/webpacker CSS, Sass, SCSS

React 导入 css 不可用

React imported css not available

css

reactjs

webpacker