Twitter bootstrap 如何在vue网页包模板中导入和使用引导？

我使用

vue网页包

模板，我想导入

Bootstrap

样式和

元素ui

组件

我已经在webpack.base.conf文件中安装了

节点sass

，

sass加载程序

，

样式加载程序

，

css加载程序

，

引导4

，配置css和sass规则：

module.exports={
...
模块：{
规则：[
{
测试：/\（js | vue）$/，
加载程序：“eslint加载程序”，
强制执行：“预”，
包括：[解析（'src'）、解析（'test'）]，
选项：{
格式化程序：需要（'eslint-friendly-formatter'）
}
},
{
测试：/\.vue$/,，
加载程序：“vue加载程序”，
选项：vueLoaderConfig
},
{
测试：/\.js$/,，
加载器：“巴别塔加载器”，
包括：[解析（'src'），解析（'test'）]
},
{
测试：/\.css$/,，
加载器：“样式加载器！css加载器”
},
{
测试：/\.scss$/,，
加载器：“样式加载器！css加载器！sass加载器”
},
{
测试：/\（png | jpe？g | gif | svg）（\？*）$/，
加载器：“url加载器”，
选项：{
限额：10000，
名称：utils.assetsPath（'img/[name].[hash:7].[ext]'））
}
},
{
测试：/\（woff2？| eot | ttf | otf）（\？*）$/，
加载器：“url加载器”，
选项：{
限额：10000，
名称：utils.assetsPath（'font/[name].[hash:7].[ext]'）
}
}
]
}
}

您需要在

main.js

文件中要求

bootstrap

require('bootstrap/dist/css/bootstrap.min.css');

---

在上面的代码片段中，它包含在

node\u modules

中，如果您有一个main

App.vue

，您可以像这样使用样式标记

<style lang="scss">
@import '../node_modules/bulma/bulma.sass';
</style>   

<style>
@import '../node_modules/font-awesome/css/font-awesome.min.css';
</style>  

@导入“../node_modules/bulma/bulma.sass”；
@导入“../node_modules/font awesome/css/font awesome.min.css”；

它通过App.vue中的

import'../../node\u modules/bootstrap/scss/bootstrap.scss'

工作。但是还有另一种方法可以在main.js中导入'bootstrap/dist/css/bootstrap.min.css'。为什么导入路径不同？为什么Web包知道应该从节点模块目录导入引导？为什么我不能在main.scss中使用

import'bootstrap/scss/bootstrap'

？我不知道为什么在main.scss中

import'bootstrap/scss/bootstrap'

不起作用？