Load bootstrap with webpack for vue

Question

How can I get bootstrap working and loaded with webpack for a vue project?

I have been trying to use this: https://www.npmjs.com/package/bootstrap-sass-webpack

I added the loaders to my webpack.config.js and installed bootstrap-sass-webpack. I get the following error when trying to build:

ERROR in ./~/bootstrap-sass-webpack/index.js
Module not found: Error: Cannot resolve module 'sass' in /Users/joebob/Desktop/vue-webpack-starter/node_modules/bootstrap-sass-webpack
 @ ./~/bootstrap-sass-webpack/index.js 1:0-76

webpack.config.js

module.exports = {
    entry: './src/main.js',
    output: {
        path: './dist',
        publicPath: 'dist/',
        filename: 'build.js'
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                loader: 'babel',
                exclude: /node_modules/
            },
            {
                test: /\.vue$/,
                loader: 'vue'
            },
            { test: /\.woff$/,   loader: "url-loader?limit=10000&minetype=application/font-woff" },
            { test: /\.ttf$/,    loader: "file-loader" },
            { test: /\.eot$/,    loader: "file-loader" },
            { test: /\.svg$/,    loader: "file-loader" }
        ]
    },
    vue: {
        loaders: {
            js: 'babel'
        }
    }
}

package.json

{
  "name": "vue-webpack-starter",
  "version": "1.0.0",
  "dependencies": {
    "bootstrap-sass-webpack": "0.0.3",
    "vue": "^1.0.16",
    "vue-router": "^0.7.11"
  },
  "devDependencies": {
    "babel-core": "^6.1.2",
    "babel-loader": "^6.1.0",
    "babel-plugin-transform-runtime": "^6.1.2",
    "babel-preset-es2015": "^6.1.2",
    "babel-preset-stage-0": "^6.1.2",
    "babel-runtime": "^5.8.0",
    "css-loader": "^0.23.0",
    "file-loader": "^0.8.5",
    "style-loader": "^0.13.0",
    "url-loader": "^0.5.7",
    "vue-hot-reload-api": "^1.2.0",
    "vue-html-loader": "^1.0.0",
    "vue-loader": "^7.3.0",
    "webpack": "^1.12.2"
  }
}

main.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './app.vue'
import Home from './home.vue'
import Items from './items.vue'
require("bootstrap-sass-webpack")

Vue.use(VueRouter)

var router = new VueRouter()

router.map({
    '/': {
        name: 'home',
        component: Home
    },
    '/items': {
        name: 'items',
        component: Items
    }
})

router.start(App, '#app')

Adding sass-loader fixed this error. Am now getting:

ERROR in ./~/bootstrap-sass-webpack/~/css-loader!./~/sass-loader!./~/bootstrap-sass-webpack/bootstrap-sass-styles.loader.js!./~/bootstrap-sass-webpack/bootstrap-sass.config.js
Module build failed:
  scripts: {
^
      Invalid CSS after "@icon-font-path": expected 1 selector or at-rule, was "bootstrap-sass/..."
      in /Users/joebob/Development/vue-webpack-starter/node_modules/bootstrap-sass-webpack/bootstrap-sass.config.js (line 2, column 1)
 @ ./~/bootstrap-sass-webpack/~/style-loader!./~/bootstrap-sass-webpack/~/css-loader!./~/sass-loader!./~/bootstrap-sass-webpack/bootstrap-sass-styles.loader.js!./~/bootstrap-sass-webpack/bootstrap-sass.config.js 4:2-458

aleixfabra aleixfabra · Accepted Answer · 2017-06-09T19:02:29

This is what I do using webpack-simple template and bootstrap-sass (https://github.com/vuejs-templates/webpack-simple):

package.json

{
  "name": "Example",
  "description": "A Vue.js project",
  "version": "1.0.0",
  "author": "Aleix Fabra <[email protected]>",
  "private": true,
  "scripts": {
  "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
  "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },
  "dependencies": {
    "vue": "^2.3.3"
  },
  "devDependencies": {
    "babel-core": "^6.0.0",
    "babel-loader": "^6.0.0",
    "babel-preset-env": "^1.5.1",
    "bootstrap-sass": "^3.3.7",
    "cross-env": "^3.0.0",
    "css-loader": "^0.25.0",
    "file-loader": "^0.9.0",
    "node-sass": "^4.5.0",
    "sass-loader": "^5.0.1",
    "vue-loader": "^12.1.0",
    "vue-template-compiler": "^2.3.3",
    "webpack": "^2.6.1",
    "webpack-dev-server": "^2.4.5"
  }
}

main.js

window.$ = window.jQuery = require('jquery')

import 'bootstrap-sass'
import 'bootstrap-sass/assets/stylesheets/_bootstrap.scss'

import Vue from 'vue'
import App from './App.vue'

new Vue({
  el: '#app',
  render: h => h(App)
})

webpack.config.js

var path = require('path')
var webpack = require('webpack')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
            // Since sass-loader (weirdly) has SCSS as its default parse mode, we map
            // the "scss" and "sass" values for the lang attribute to the right configs here.
            // other preprocessors should work out of the box, no loader config like this necessary.
            'scss': 'vue-style-loader!css-loader!sass-loader',
            'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
          }
          // other vue-loader options go here
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      },
      {
        test: /\.scss$/,
        loader: 'style-loader!css-loader!sass-loader'
      },
      {
        test: /\.(otf|eot|woff|woff2|ttf|svg)$/,
        loader: 'file-loader'
      },
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true
  },
  performance: {
    hints: false
  },
  devtool: '#eval-source-map'
}

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}

Load bootstrap with webpack for vue

2 Answers