Rails Webpacker 3.0导入CSS文件不起作用

我正在使用Webpacker工作Rails5项目，以便正确运行React

但是当我在我的根组件中import我的css文件时，它似乎根本不起作用。 看起来样式表根本就没有了。

这是我的根组件

 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( , document.getElementById('start-form-index-container') ) 

这是我的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 

那么我如何使用webpacker使导入的css运行良好？

谢谢！

Answer 1

我刚才遇到了类似的问题并找到了解决方案。 希望这有助于其他人。

我正在使用webpacker 3.4.3。 它使用extract-text-webpack-plugin自动生成包含导入样式的CSS包。 它与JS包的名称相同。 因此，如果您的JS包是hello_react.jsx ，并且在其中导入一些CSS，如下所示： import "./Hello.css"; ， Hello.css中的样式包含在名为hello_react.css的CSS包中。 在您的Rails视图中，您可以添加类似<%= stylesheet_pack_tag('hello_react.css') %> ，并且样式应该可以使用。

有关详细信息，请参阅Webpacker CSS文档的Rails视图部分中的链接样式 。