Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

Development Tools Adding Styles to Your Application

jay chacko
PLUS
jay chacko
Courses Plus Student 525 Points
Posted by jay chacko
jay chacko
Courses Plus Student 525 Points

How would i add Bootstrap 4 as a loader for a React App since bootstrap is depended on it separate jquery and js files?

I am trying to recreate a webpage in React that was create in completely in Bootstrap 4 and html. Alot of features are depended on its Jquery and js file. Since React-bootstrap is not the same as regular bootstrap, how i would set this up in the loader? I have all bootstrap 4 necessary files locally available. Assume i installed all the React stuff which i did ( just not in the package.json use this file to see clearly https://www.dropbox.com/s/pjyp4bubh2smfuo/treehouse.js?dl=0

{
  "name": "webpack-treehouse-example",
  "version": "0.0.1",
  "scripts": {
    "build": "webpack --optimize-minimize",
    "start": "webpack-dev-server"
  },
  "devDependencies": {
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-stage-2": "^6.11.0",
    "css-loader": "^0.23.1",
    "html-webpack-plugin": "^2.22.0",
    "node-sass": "^3.8.0",
    "sass-loader": "^4.0.0",
    "style-loader": "^0.13.1",
    "webpack": "^1.13.1",
    "webpack-dev-server": "^1.14.1"
  },
  "dependencies": {
    "jquery": "^3.1.0"
  }
}

this is my current package.json .

Below is my webpack

var HtmlWebpackPlugin = require("html-webpack-plugin");

var webpackConfig = {
    entry: "./src/index.js",
    output: {
        path: "build",
        filename: "bundle.js"
    },
    module: {
        loaders: [
            {
                loader: "babel-loader",
                test: /\.js$/
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "src/index.ejs"
        })
    ]
};

module.exports = webpackConfig;