gpt4 book ai didi

ruby-on-rails - Rails Webpacker 3.0 导入 CSS 文件不起作用

转载 作者:行者123 更新时间:2023-12-04 02:18:23 25 4
gpt4 key购买 nike

我正在使用 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 一起工作呢?

谢谢!

最佳答案

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

我正在使用 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 View 中,您可以添加类似 <%= stylesheet_pack_tag('hello_react.css') %> 的内容。 ,样式应该可以工作。

有关更多信息,请参阅 Link styles from your Rails view Webpacker CSS 文档的部分。

关于ruby-on-rails - Rails Webpacker 3.0 导入 CSS 文件不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46257346/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com