@AntonVirovets

Почему не работает bootstrap в webpack?

Здравствуйте. Такая проблема. не работает bootstrap. я уже вроде бы все установил. Может подскажете в чем дело?
это 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';


'это 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')
    ]
};


'это 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"
    }
}

так выглядит index.html. И получается должно быть 3 равных колонки, а ничего не получается.
<!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>


А вот еще что выдает консоль в браузере
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

То есть я так понял что bootstrap находит но почему то не отображает.

Помогите, а то я не знаю с какой стороны уже подойти.
И еще. Я правильно делаю что после всего установленного делаю команду npm run build? или этого делать не нужно?
  • Вопрос задан
  • 1648 просмотров
Пригласить эксперта
Ответы на вопрос 1
@AntonVirovets Автор вопроса
Вопрос закрыт. Не знаю почему и как, но мне стоило поменять эту строчку кода import 'bootstrap/dist/css/bootstrap.css';
на эту import 'bootstrap/scss/bootstrap.scss';
и все заработало))
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы