Rails Webpacker 3.0 导入 CSS 文件不起作用 [英] Rails Webpacker 3.0 import CSS file is not working

问题描述

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

I am working Rails5 project with Webpacker in order to run React properly

但是当 import 我的根组件中的 css 文件似乎根本不起作用.看起来样式表根本没有出现.

But when import my css file inside my root component seems it is not working at all. Looking like stylesheet is not coming at all.

这是我的根组件

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 配合使用?

So how i can make imported css working well with webpacker?

谢谢！

推荐答案

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

I had a similar problem just now and found a solution. Hopefully this helps someone else.

我使用的是 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') %> 的内容，并且样式应该可以工作.

I'm using webpacker 3.4.3. It uses the extract-text-webpack-plugin to auto-generate a CSS pack containing the imported styles. It takes the same name as your JS pack. So if your JS pack is hello_react.jsx, and in it you import some CSS like so: import "./Hello.css";, the styles in Hello.css are included in a CSS pack called hello_react.css. In your Rails view you can add something like <%= stylesheet_pack_tag('hello_react.css') %>, and the styles should work.

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

For more info, see the Link styles from your Rails view section of the Webpacker CSS docs.

这篇关于Rails Webpacker 3.0 导入 CSS 文件不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！