无法解析"../node_modules/bootstrap/dist/css/bootstrap.min.css"?

Question

我将尝试在我的项目中使用react-bootstrap-table2来创建一个简单的bootstrap表格，但是遇到了以下错误：

“编译失败：在'/Users/xxx/Documents/xxx/src/routes/home'中找不到模块“../node_modules/bootstrap/dist/css/bootstrap.min.css”。

我已经安装了所有必要的软件包，并验证了bootstrap.min.css是否存在于应该存在的位置。

我的代码如下：

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文件如下：

{
  "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"
}

有什么建议可以解决这个错误吗？

- arcade16

---

node_modules 中的目录不需要路径前缀。 - Yonggoo Noh

Answer 1

试试这个：

import 'bootstrap/dist/css/bootstrap.min.css';

当未指定路径时，Node/webpack将在node_modules文件夹中搜索导入项。我不确定出了什么问题，但这是从node_modules文件夹中导入模块的正确方法。

- sagi

---

搞定了，谢谢！一旦 Stack 允许，我会立即接受。 - arcade16

这行代码应该放在哪里？ - Razvan Zamfir

当我尝试导入font-awesome时，这个解决方案对我也起作用了。@import 'font-awesome/css/font-awesome.min.css'; - Waleed Alrashed

Answer 2

如果您正在使用VS Code，请在angular.json的样式中使用“node_modules/bootstrap/dist/css/bootstrap.min.css”。

- krishna

---

你的回答可以通过提供更多支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心中找到有关如何编写良好答案的更多信息。 - Community