使用webpack加載bootstrap vue

Question

如何獲得引導程序併爲vue項目加載webpack？

我一直在嘗試使用這個：https://www.npmjs.com/package/bootstrap-sass-webpack

我加入了裝載機我webpack.config.js並安裝引導 - 薩斯-的WebPack。我得到試圖建立時出現以下錯誤：

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') 

添加sass-loader修正了這個錯誤。我現在越來越：

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 

Answer 1

您應該安裝sass-loader：

npm install sass-loader --save-dev 

Answer 2

這是我使用的是什麼的WebPack，簡單的模板和引導-SASS（https://github.com/vuejs-templates/webpack-simple）：

package.json

{ 
    "name": "Example", 
    "description": "A Vue.js project", 
    "version": "1.0.0", 
    "author": "Aleix Fabra <aleixfabra@gmail.com>", 
    "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 
    }) 
    ]) 
}