無法從Webpack中的npm導入CSS

Question

我無法弄清楚將bootstrap.css拉入Webpack / React項目的正確方法。 當webpack構建我的項目時，出現以下錯誤：

ERROR in ./app/js/XXXXXX/XXXXXX.jsx
Module not found: Error: Cannot resolve module 'bootstrap/css/bootstrap.css' in /Volumes/Doomsday Device/XXXXXX
 @ ./app/js/XXXXXX/XXXXX.jsx 27:0-38

在源文件中，我具有以下導入：

import React from 'react';
import LinkedStateMixin from 'react-addons-linked-state-mixin';

require('bootstrap/css/bootstrap.css');

import Nav     from 'react-bootstrap/lib/Nav';
import NavItem from 'react-bootstrap/lib/NavItem';

在我的webpack.config.js ，我有：

module.exports = {  
    ...
    module: {
        loaders: [
            { test: /\.jsx?$/,  loaders: ['react-hot', 'babel-loader'], include: APP_PATH },
            { test: /\.scss$/, loaders: ["style", "css", "sass"] },
            { test: /\.css$/, loaders: ["style", "css"] },
            { test: /\.(png|jpe?g|gif)$/, loader: "file-loader?name=img/img-[hash:6].[ext]" }
        ]
    },
    ....
}

我在package.json添加了bootstrap作為依賴項：

{
  ...
  "dependencies": {},
  "devDependencies": {
    ...
    "bootstrap": "^3.3.6",
    "css-loader": "^0.19.0",
    ...
  },
  ...
}

關於為何可能出錯的任何想法？ 謝謝！

Answer 1

看來您輸入了錯誤的路徑，請嘗試從bootstrap/dist/css/bootstrap.css導入