How to import and use Bootstrap in vue webpack template?

Question

I using vue-webpack template, and I want to import Bootstrap styles and element-ui components.

I have installed node-sass, sass-loader, style-loader, css-loader, bootstrap 4,and config css and sass rules in webpack.base.conf.js file:

module.exports = {
  ...
  module: {
    rules: [
      {
        test: /\.(js|vue)$/,
        loader: 'eslint-loader',
        enforce: 'pre',
        include: [resolve('src'), resolve('test')],
        options: {
          formatter: require('eslint-friendly-formatter')
        }
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test')]
      },
      {
        test: /\.css$/,
        loader: 'style-loader!css-loader'
      },
      {
        test: /\.scss$/,
        loader: 'style-loader!css-loader!sass-loader'
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      }
    ]
  }
}

Then, I want to import bootstrap in src/styles/main.scss file :

@import '~bootstrap/scss/bootstrap';
@import 'styles/variables';

Finally, I want to apply the bootstrap styles in any of my <template></template> elements in .vue file like:

<template>
  <nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">{{ msg }}</a>
      </div>
    </div>
  </nav>
</template>

<script>
  ...
</script>

<style>
  ...
</style>

Sadlly, it doesn't works.It seems to vue don't know the existence of bootstrap!

How can I do? And how can I override the basic bootstrap style in time?

I don't know why import 'bootstrap/scss/bootstrap' in main.scss doesn't works? — junlin

Max Max · Accepted Answer · 2017-06-28T17:59:58

If you have a main App.vue you can use the Style tag like this

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

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

How to import and use Bootstrap in vue webpack template?

2 Answers