项⽬实战 - Webpack 中使⽤ Bootstrap - 《前端学习笔记》

安装 Bootstrap
- 安装
引⼊ Bootstrap
基本样式⽀持
⾃定义样式
- 声明⾃定义样式
- 引⼊⾃定义样式
验证效果

安装 Bootstrap

详情查看：https://getbootstrap.com/docs/5.0/getting-started/webpack/

安装

# bootstrap npm install bootstrap @popperjs/core

引⼊ Bootstrap

// 实际引⼊的是 Bootstrap.js import { Button } from ‘bootstrap’;

基本样式⽀持

安装

# sass npm i -D sass sass-loader

配置 sass-loader

{

test: /.(scss)$/, use: [{ // inject CSS to page loader: ‘style-loader’ }, { // translates CSS into CommonJS modules loader: ‘css-loader’ }, { // Run postcss actions loader: ‘postcss-loader’, options: { // postcssOptions is needed for postcss 8.x; // if you use postcss 7.x skip the key postcssOptions: { // postcss plugins, can be exported to postcss.config.js plugins: function () { return [ require(‘autoprefixer’) ]; }

}

}，{

// compiles Sass to CSS loader: ‘sass-loader’ }]

}

导⼊样式

import ‘bootstrap/dist/css/bootstrap.min.css’;

⾃定义样式

声明⾃定义样式

// ./src/css/custom.scss ⾃定义样式 $body-bg: #dfb; $primary: #0074d9; $danger: #ff4136; // ./src/css/main.scss @import “custom”; @import “~bootstrap/scss/bootstrap”;