11

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

那么我怎样才能使导入的 css 与 webpacker 一起工作呢？

谢谢！

4

1 回答 1

6

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

我正在使用 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 视图中的链接样式部分。

于 2018-04-03T22:04:48.613 回答