Question

我是React的新手，但是已经广泛使用React Native。

基本上，我正在尝试一些我认为非常简单和常见的事情。

我想使用NPM软件包bootstrap-grid-only-css（https://www.npmjs.com/package/bootstrap-grid-only-css）。

我已经安装了它，并且它在node_modules文件夹中可用。我的问题是尝试将其导入到app.js文件中。

我尝试过

import { 'bootstrap-grid-only-css' } from "bootstrap-grid-only-css"

和

import { 'bootstrap-grid.min.css' } from "../node_modules/dist/bootstrap-grid-only-css"

也尝试过

const bs = require（'bootstrap-grid.min.css'）;

似乎都不起作用。所有错误。

任何人都可以建议正确的进口方式吗？

非常感谢。

Answer 1

如果要导入CSS文件，请不要在import之后加上文件名

import "../node_modules/dist/bootstrap-grid-only-css"/bootstrap-grid.min.css

就像： import 'react-tabs/style/react-tabs.css';

Answer 2

将引导程序添加到您的react应用程序非常简单。您可以按照React Docs Adding Bootstrap

执行以下步骤

第一步，您需要通过npm install将引导程序添加到项目中。

SEVERE: A child container failed during start java.util.concurrent.ExecutionException: org.apache.catalina.LifecycleException: Failed to start component [StandardEngine[Catalina].StandardHost[localhost].StandardContext[]] at java.base/java.util.concurrent.FutureTask.report(FutureTask.java:122) at java.base/java.util.concurrent.FutureTask.get(FutureTask.java:191) at org.apache.catalina.core.ContainerBase.startInternal(ContainerBase.java:941) at org.apache.catalina.core.StandardHost.startInternal(StandardHost.java:872) at org.apache.catalina.util.LifecycleBase.start(LifecycleBase.java:150) at org.apache.catalina.core.ContainerBase$StartChild.call(ContainerBase.java:1421) at org.apache.catalina.core.ContainerBase$StartChild.call(ContainerBase.java:1411) at java.base/java.util.concurrent.FutureTask.run(FutureTask.java:264) at java.base/java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1128) at java.base/java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:628) at java.base/java.lang.Thread.run(Thread.java:834) Caused by: org.apache.catalina.LifecycleException: Failed to start component [StandardEngine[Catalina].StandardHost[localhost].StandardContext[]] at org.apache.catalina.util.LifecycleBase.start(LifecycleBase.java:167) ... 6 more Caused by: java.lang.NoClassDefFoundError: Could not initialize class org.apache.openejb.util.proxy.LocalBeanProxyFactory$Unsafe at org.apache.openejb.util.proxy.LocalBeanProxyFactory.createProxy(LocalBeanProxyFactory.java:137) at org.apache.openejb.util.proxy.LocalBeanProxyFactory.createProxy(LocalBeanProxyFactory.java:147) at org.apache.tomee.catalina.TomcatWebAppBuilder.eagerInitOfLocalBeanProxies(TomcatWebAppBuilder.java:1563) at org.apache.tomee.catalina.TomcatWebAppBuilder.startInternal(TomcatWebAppBuilder.java:1309) at org.apache.tomee.catalina.TomcatWebAppBuilder.configureStart(TomcatWebAppBuilder.java:1125) at org.apache.tomee.catalina.GlobalListenerSupport.lifecycleEvent(GlobalListenerSupport.java:133) at org.apache.catalina.util.LifecycleBase.fireLifecycleEvent(LifecycleBase.java:94) at org.apache.catalina.core.StandardContext.startInternal(StandardContext.java:5154) at org.apache.catalina.util.LifecycleBase.start(LifecycleBase.java:150) ... 6 more

您可以在上面的代码中添加npm install --save bootstrap的引导程序版本。

然后转到 src / index.js 文件，并在开始时在 index.js

中添加以下行，导入Bootstrap CSS和可选的Bootstrap主题CSS。

bootstrap

然后删除 scr / App.css

中的所有自定义css写入

然后结帐，将引导代码添加到 App.js 文件中。它应该可以正常工作。

如果您想看这段视频How to import bootstrap in react application，您将了解它是多么容易。

反应-从Node_Modules导入文件

2 个答案: