Cannot Import CSS from an npm in webpack

Question

I can't figure out the correct incantation to pull bootstrap.css into my Webpack/React project. When webpack builds my project, I get the following error:

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

In the source file, I have the following imports:

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';

In my webpack.config.js, I have:

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]" }
        ]
    },
    ....
}

I have added bootstrap as a dependency in package.json:

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

Any ideas as to why might be wrong? Thanks!

might be a duplication of http://stackoverflow.com/questions/27502608/resolving-require-paths-with-webpack — Katya Pavlenko, Feb 20 '16 at 21:16

score 0 · Answer 1 · answered Feb 20 '16 at 21:39

0

It looks like you have typed wrong path, try importing it from bootstrap/dist/css/bootstrap.css

answered Feb 20 '16 at 21:39

Oles Savluk

4,315
1
26
40

Cannot Import CSS from an npm in webpack

1 Answers1