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，并在其中导入一些类似于import "./Hello.css";的CSS，则Hello.css中的样式包含在名为hello_react.css的CSS包中。在您的Rails视图中，您可以添加类似<%= stylesheet_pack_tag('hello_react.css') %>的内容，并且样式应该有效。

有关详细信息，请参阅Webpacker CSS文档的Link styles from your Rails view部分。

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

1 个答案: