无法解析"../node_modules/bootstrap/dist/css/bootstrap.min.css"? [英] Can't resolve '../node_modules/bootstrap/dist/css/bootstrap.min.css'?
问题描述
我试图在我的项目中使用react-bootstrap-table2创建一个简单的引导表,但出现错误:
I am trying to use react-bootstrap-table2 in my project to create a simple bootstrap table, but am getting the error:
无法编译:找不到模块:无法解析"/Users/xxx/Documents/xxx/src/routes/home"中的"../node_modules/bootstrap/dist/css/bootstrap.min.css"
Failed to Compile: Module not found: Can't resolve '../node_modules/bootstrap/dist/css/bootstrap.min.css' in '/Users/xxx/Documents/xxx/src/routes/home'.
我确实安装了所有必需的软件包,并验证了bootstrap.min.css应该存在的位置.
I did install all the necessary packages and verified that bootstrap.min.css exists where it should.
我的代码如下:
import React from 'react';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import BootstrapTable from 'react-bootstrap-table-next';
class Home extends React.Component {
state = {
products: [
{
id: 1,
name: 'TV',
'price': 1000
},
{
id: 2,
name: 'Mobile',
'price': 500
},
{
id: 3,
name: 'Book',
'price': 20
},
],
columns: [{
dataField: 'id',
text: 'Product ID'
},
{
dataField: 'name',
text: 'Product Name'
}, {
dataField: 'price',
text: 'Product Price',
sort: true
}]
}
render() {
return (
<div className="container" style={{ marginTop: 50 }}>
<BootstrapTable
striped
hover
keyField='id'
data={ this.state.products }
columns={ this.state.columns } />
</div>
);
}
}
export default Home;
我的package.json文件如下:
My package.json file looks like this:
{
"name": "codist.org",
"version": "0.1.0",
"private": true,
"dependencies": {
"bootstrap": "^4.0.0",
"material-ui": "^1.0.0-beta.25",
"material-ui-icons": "^1.0.0-beta.17",
"react": "^16.2.0",
"react-bootstrap-table-next": "^1.1.3",
"react-dom": "^16.2.0",
"react-router-dom": "^4.2.2",
"react-scripts": "^1.1.5",
"reactstrap": "^6.3.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"proxy": "http://localhost:8080"
}
关于如何解决该错误的任何建议?
Any suggestions for how to resolve that error?
推荐答案
尝试一下:
import 'bootstrap/dist/css/bootstrap.min.css';
当不指定路径时,Node/webpack将在 node_modules
文件夹中搜索导入.我不确定发生了什么问题,但这是从 node_modules
文件夹导入模块的正确方法.
When not specifying a path, Node/webpack will search for the import inside node_modules
folder. I'm not sure what's going wrong, but this is the correct way to import modules from the node_modules
folder.
这篇关于无法解析"../node_modules/bootstrap/dist/css/bootstrap.min.css"?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!