Webpack：使用＆＃39; vue init webpack＆＃39;和＆＃39; vue init webpack-simple＆＃39;项目

Question

我对Webpack和Vue.js很新。

我们知道vue-cli带有2个项目模板，webpack和webpack-simple。

当我使用webpack模板时，如果我想使用其他包Bootstrap 4 beta，我只需要这样做：

main.js中的

：

import 'jquery'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap'

在Webpack配置中：

plugins: [
  new webpack.ProvidePlugin({
    jQuery: 'jquery',
    $: 'jquery',
    jquery: 'jquery',
    Popper: ['popper.js', 'default']
  })
]

Bootstrap工作。

如果我使用webpack-simple模板，我需要在App.vue中执行此操作以使Bootstrap工作：

<style scoped>
    @import '~bootstrap/dist/css/bootstrap.css';
</style>

那么，如果有一些选择会导致这些差异吗？

我更喜欢webpack-simple让我的项目更简单。

但我认为这是导致我的应用中的其他一些软件包无法正常工作的原因（即mavon-editor中的图标未显示，但它与webpack模板一起正常工作）。

感谢。

Answer 1

我担心两种方式都不是导入引导程序的最佳方法。 试试npm install bootstrap@4.0.0-alpha.6

和网站中的follow the instructions。

Answer 2

我比较了两者的webpack配置和package.json并找到答案。

关键点是一个名为style-loader的插件，实际上是Vue.js中的vue-style-loader

可以：

  

通过注入标记

将DOM添加到DOM

按npm install vue-style-loader --save-dev

安装

并从以下位置编辑webpack配置：

  {
    test: /\.css$/,
    loader: 'css-loader'
  },

为：

  {
    test: /\.css$/,
    use: [
      {
        loader: 'vue-style-loader'
      },
      {
        loader: 'css-loader'
      }
    ]
  },

现在自动加载css个文件，@import *.css标记中不再需要<style>。 其他第三方软件包也开始正常运行。