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

Question

我正在使用webpacker工作rails5项目，以便正确地进行反应

但是，当import我的CSS文件内部的CSS文件似乎根本无法正常工作。看起来stylesheet根本不会来。

这是我的根组件

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')
)

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

那么，如何使导入的CSS与WebPacker合作？

谢谢！

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包中。在您的轨道视图中，您可以添加诸如<%= stylesheet_pack_tag('hello_react.css') %>之类的东西，并且样式应起作用。

有关更多信息，请参阅WebPacker CSS文档的Rails视图部分的链接样式。