Rails Webpacker 3.0导入CSS文件无法正常工作

Question

我正在使用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(
  <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

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

谢谢!

Answer 1

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

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

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