使用 webpack 为 vue 加载引导程序

Posted 2023-02-22

【中文标题】使用 webpack 为 vue 加载引导程序

【英文标题】：Load bootstrap with webpack for vue

【发布时间】：2016-06-10 03:24:27

【问题描述】：

如何让引导程序工作并为 vue 项目加载 webpack？

我一直在尝试使用这个：https://www.npmjs.com/package/bootstrap-sass-webpack

我将加载器添加到我的 webpack.config.js 并安装了 bootstrap-sass-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

【问题讨论】：

这是我的 setup 用于 webpack + vue + bootstrap。

【参考方案1】：

你应该安装sass-loader:

npm install sass-loader --save-dev

【讨论】：

它确实让我走得更远，我现在遇到了这个错误。我一定错过了一些关键步骤。添加 sass-loader 后，上面更新了新错误

【参考方案2】：

这就是我使用 webpack-simple 模板 和 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 <[e-mail]>",
  "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
    )
  ])