vite环境下使用bootstrap_业界新闻

发布时间:2024-07-28 20:40

阅读量:0

环境

nodejs 18
pnpm

初始化

pnpm init pnpm add -D vite --registry http://registry.npm.taobao.org pnpm add bootstrap @popperjs/core --registry http://registry.npm.taobao.org pnpm add -D sass --registry http://registry.npm.taobao.org

新建vite.config.js

const path = require('path')  export default {     root: path.resolve(__dirname, 'src'),     server: {         port: 8080,         hot: true     } }

src下新建index.html

<!doctype html> <html lang="zh"> <head>     <meta charset="utf-8">     <meta name="viewport" content="width=device-width, initial-scale=1">     <title>Bootstrap Vite</title> </head> <body> <div class="container py-4 px-3 mx-auto">     <h1>Hello, Bootstrap and Vite!</h1>     <button class="btn btn-primary">Primary button</button> </div> <script type="module" src="./js/main.js"></script> </body> </html>

修改package.json

  "scripts": {     "start": "vite"   },

运行

pnpm start

引入bootstrap

修改vite.config.js

const path = require('path')  export default {     root: path.resolve(__dirname, 'src'),     resolve: {         alias: {             '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),         }     },     server: {         port: 8080,         hot: true     } }

新建 src/scss/styles.scss

@import "~bootstrap/scss/bootstrap";

新建src/js/main.js

// Import our custom CSS import '../scss/styles.scss'  // Import all of Bootstrap's JS import * as bootstrap from 'bootstrap' //单个引入 //import {Button} from 'bootstrap'

打包

修改package.json

  "scripts": {     "start": "vite",     "build": "vite build"   },

执行pnpm build

dist相对于index.html，默认会在src目录下和index.html同级

如果想打包到src目录外可以设置相对路径

const path = require('path')  export default {     root: path.resolve(__dirname, 'src'),     resolve: {         alias: {             '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),         }     },     server: {         port: 8080,         hot: true     },     build:{         outDir:'../dist'     } }