Как подключить bootstrap локально
Ответы
Иван Лисин
14 марта 2023
Порядок подключения в nodejs
следующий:
1) Устанавливаем зависимости:
npm install bootstrap webpack mini-css-extract-plugin
npm install -D webpack-cli css-loader
2) Создаем файл ./src/index.js
и импортируем файлы бутстрап
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min.js';
3) Создаем конфигурационный файл webpack.config.js
и добавляем правило для css
import MiniCssExtractPlugin from 'mini-css-extract-plugin';
const mode = process.env.NODE_ENV || 'development';
export default {
mode,
module: {
rules: [
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader'],
},
],
},
plugins: [new MiniCssExtractPlugin()],
};
4) Далее в package.json
включаем ES модули и добавляем команду для сборки:
{
...
"type": "module",
"scripts": {
"build": "webpack",
...
}
5) Запускаем сборку командой npm run build
, чтобы в директории ./dist
получить файлы main.js
и main.css
.
6) Полученные файлы подключаем в шапке index.html
<link href="dist/main.css" rel="stylesheet">
<script defer src="dist/main.js"></script>
Готово!
0
0