文章/答案/技术大牛

发布

社区首页 >问答首页 >在Nuxt 3和Vite中集成引导5

问在Nuxt 3和Vite中集成引导5
EN

Stack Overflow用户

提问于 2021-11-24 16:32:15

回答 4查看 6.4K关注 0票数 5

我正在尝试将Bootstrap 5集成到一个新的Nuxt 3项目中，但是我面临一个我无法解决的问题:我想通过只导入必要的模块( scss和javascript)来优化它，如这里所解释的：https://getbootstrap.com/docs/5.0/customize/optimize/。

我成功地导入了样式，但是我找不到适当的方法来导入必要的js。我在bootstrap.js目录中创建了一个public文件，如下所示：

// import 'bootstrap/js/dist/alert';
import 'bootstrap/js/dist/button';
// import 'bootstrap/js/dist/carousel';
import 'bootstrap/js/dist/collapse';
import 'bootstrap/js/dist/dropdown';
// import 'bootstrap/js/dist/modal';
// import 'bootstrap/js/dist/popover';
// import 'bootstrap/js/dist/scrollspy';
// import 'bootstrap/js/dist/tab';
// import 'bootstrap/js/dist/toast';
// import 'bootstrap/js/dist/tooltip';

并将该文件添加到nuxt.config.ts的meta部分，以确保在我的页面的head部分中调用该文件，以便javascript在任何地方都可用。

meta: {
    script: [
        { src: 'js/bootstrap.js' }
    ],
}

但我一直有个错误：

Uncaught :无法在模块外使用导入语句

我理解这是因为Vite没有编译它，但是我不知道如何编译它。有人知道怎么做吗？谢谢！

bootstrap-5

vite

nuxt.js

回答 4

Stack Overflow用户

发布于 2022-08-16 14:50:36

yarn添加bootstrap
Create plugins/useBootstrap.client.ts文件并粘贴以下代码

import bootstrap from 'bootstrap/dist/js/bootstrap.bundle'

export default defineNuxtPlugin(nuxtApp => {
    nuxtApp.provide('bootstrap', bootstrap)
})

sass-loader@latest

运行以下命令：纱线add sass

创建assets/styles/main.scss文件并粘贴以下代码

@import "bootstrap/scss/bootstrap";

nuxt.config.ts中的

添加以下代码

export default defineNuxtConfig({
    css: ['~/assets/styles/main.scss'],
})

如果您想使用依赖js的内容，如下拉、modals，则必须安装@popperjs/core -dev @popperjs/core或npm安装--保存

注意：您可以自定义main.scss文件中的引导程序

票数 5

Stack Overflow用户

发布于 2022-08-01 15:59:45

如果你还没有解决，试试这个方法。对我来说很管用。

安装

bootstrap5

yarn add bootstrap

更改nuxt配置设置(nuxt.config.ts)的

import { defineNuxtConfig } from "nuxt";

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  css: ["bootstrap/dist/css/bootstrap.min.css"], // add
  vite: {
    define: {
      "process.env.DEBUG": false,
    },
  },
});

查看是否应用了样式。(app.vue)

<template>
  <div class="m-5">
    <!-- <NuxtPage /> -->
    <div class="btn btn-success">Success</div>
    <div class="btn btn-danger">Danger</div>
    <div class="btn btn-warning">Warning</div>
  </div>
</template>

票数 1

Stack Overflow用户

发布于 2022-09-11 22:03:09

安装引导带，

npm安装引导

Config nuxt.config.ts，

导出默认的defineNuxtConfig({ css：'bootstrap/dist/css/bootstrap.min.css‘，脚本：{ src：'bootstrap/dist/js/bootstrap.bundle.min.js’}，vite：{ define：{ 'process.env.DEBUG'：false，})

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/70099682

复制

相似问题

问在Nuxt 3和Vite中集成引导5
EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在Nuxt 3和Vite中集成引导5EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在Nuxt 3和Vite中集成引导5
EN