Здравствуйте. Такая проблема. не работает 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? или этого делать не нужно?
Простой
Средний
