Why is bootstrap not working in webpack?

A

AntonVirovets2018-04-01 15:58:56

Bootstrap

AntonVirovets, 2018-04-01 15:58:56

Hello. Such a problem. bootstrap is not working. I seem to have everything installed. Can you tell me what's wrong?
this is app.js

import './js/rainbows.js';
import './scss/base.scss';
import './scss/typography.scss';
import 'jquery/dist/jquery.js'
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/js/bootstrap.js';

'this is webpack.config

const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    entry: './src/app.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [{
            test: /\.scss$/,
            use: ExtractTextPlugin.extract({
                fallback: 'style-loader',
                use: ['css-loader', 'sass-loader']
            })
        }]
    },
    plugins: [
        new ExtractTextPlugin('style.css')
    ]
};

'this is package.json

{
    "name": "sait2",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "build": "webpack",
        "start": "webpack --watch"
    },
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "autoprefixer": "^8.2.0",
        "babel-core": "^6.26.0",
        "babel-loader": "^7.1.4",
        "babel-preset-es2015": "^6.24.1",
        "css-loader": "^0.28.11",
        "extract-text-webpack-plugin": "^3.0.2",
        "node-sass": "^4.8.3",
        "postcss-loader": "^2.1.3",
        "precss": "^3.1.2",
        "sass-loader": "^6.0.7",
        "style-loader": "^0.20.3",
        "webpack": "^3.11.0"
    },
    "dependencies": {
        "bootstrap": "^4.0.0",
        "bootstrap-loader": "^2.2.0",
        "bootstrap-sass": "^3.3.7",
        "jquery": "^3.3.1",
        "popper.js": "^1.14.1"
    }
}

this is how index.html looks like. And it turns out there should be 3 equal columns, but nothing happens.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel='stylesheet' href='dist/style.css'>
    <title>test_verstka</title>
</head>

<body>
    <div class="conainer-fluid">
        <div class="row">
            <div class="col-md-4">text1</div>
            <div class="col-md-4">text2</div>
            <div class="col-md-4">text3</div>
        </div>
    </div>




    <script type="text/javascript" src="dist/bundle.js"></script>
</body>

</html>

And here's what the console outputs in the browser

bundle.js:13038 Uncaught Error: Module parse failed: Unexpected token (7:0)
You may need an appropriate loader to handle this file type.
|  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|  */
| :root {
|   --blue: #007bff;
|   --indigo: #6610f2;
    at Object.<anonymous> (bundle.js:13038)
    at __webpack_require__ (bundle.js:20)
    at Object.<anonymous> (bundle.js:10451)
    at __webpack_require__ (bundle.js:20)
    at bundle.js:63
    at bundle.js:66
(anonymous) @ bundle.js:13038
__webpack_require__ @ bundle.js:20
(anonymous) @ bundle.js:10451
__webpack_require__ @ bundle.js:20
(anonymous) @ bundle.js:63
(anonymous) @ bundle.js:66

That is, I understand that bootstrap finds but for some reason does not display.
Please help, I don't know which way to go.
And further. Am I doing the right thing that after everything is installed, I do the npm run build command? Or is this not necessary?

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

A

AntonVirovets, 2018-04-02
@AntonVirovets

The question is closed. I don’t know why and how, but I had to change this line of code import 'bootstrap/dist/css/bootstrap.css';
to this import 'bootstrap/scss/bootstrap.scss';
one and it all worked))