Question

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

导入似乎“有效”，但组件未获得所需的样式。

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似乎在我的页面上不可用。我不知道应该在哪里导入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不可用

2 个答案: