Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

How can I include bootstrap css & js from node_modules?

See original GitHub issue

I try like this example webpack module config

dev.config.js

  module: {
    loaders: [
      { test: /\.js$/, exclude: /node_modules/, loaders: ['react-hot', 'babel?stage=0&optional=runtime&plugins=typecheck']},
      { test: /\.css$/, loader: 'style-loader!css-loader' },
      { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file" },
      { test: /\.(woff|woff2)$/, loader:"url?prefix=font/&limit=5000" },
      { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream" },
      { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=image/svg+xml" },
      { test: /\.json$/, loader: 'json-loader'},
      { test: /\.scss$/, exclude: /node_modules/, loader: 'style!css?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]!autoprefixer?browsers=last 2 version!sass?outputStyle=expanded&sourceMap&includePaths[]=node_modules/compass-mixins/lib'},
      { test: webpackIsomorphicToolsPlugin.regular_expression('images'), loader: 'url-loader?limit=10240'}
    ]
  },

Html.js

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

but CLI show error repeat again and agian as follows:

/Users/hank7444/Documents/github/react-rocket2/node_modules/bootstrap/dist/css/bootstrap.css:7
[1] html {
[1]
[1] ^

thx a lot!

Issue Analytics

State:
Created 8 years ago
Reactions:5
Comments:22

Top GitHub Comments

72reactions

kwooncommented, Sep 14, 2015

You need to add add this line

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

only to the client.js. Why? See here.

14reactions

hank7444commented, Oct 2, 2015

hi all: I solved this issue by changing the webpack loaders orders like this:

{ test: /\.scss/, exclude: /node_modules/, loader: 'style!css?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]!autoprefixer?browsers=last 2 version!sass?outputStyle=expanded&sourceMap&includePaths[]=node_modules/compass-mixins/lib'},
{ test: /\.css$/, loader: 'style-loader!css-loader' },

Top Results From Across the Web

Webpack - Bootstrap

Install bootstrap as a Node.js module using npm. Importing JavaScript. Import Bootstrap's JavaScript by adding this line to your app's entry point (usually ......

How to include bootstrap css and js in reactjs app?

If you are new to React and using create-react-app cli setup, run the npm command below to include the latest version of bootstrap....

How to add Bootstrap to your Nodejs project - Educative.io

The first solution I'd suggest here is to use a CDN. Here's how you can do it. Go here to copy Bootstrap CSS,...

How to use bootstrap node_modules - Laracasts

Hey guys, I am new to laravel and i am wondering how to use the node_modules? For the bootstrap JS, For the CSS...

How to include Bootstrap in your project with Webpack

If you choose to import Bootstrap's JavaScript plugins individually as needed, you must also install exports-loader. ... You'll need to install ...