找不到模塊：錯誤：無法解析'bootstrap / css / bootstrap.min.css'，我無法將Bootstrap添加到我的Vue項目中

Question

在我的webpack.base.conf.js項目webpack.base.conf.js ：

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'bootstrap':resolve('src/vendor/bootstrap')
    }
  },

我添加了引導程序解析。

但是當我在main.js導入引導文件時：

import Vue from 'vue'
import App from './App'
import router from './router'
import $ from 'jquery'
import 'bootstrap/js/bootstrap.min.js'  // my add line
import 'bootstrap/css/bootstrap.min.css'  // my add line

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

但是出現錯誤：

./src/main.js
Module not found: Error: Can't resolve 'bootstrap/css/bootstrap.min.css' in '/Users/dele/Desktop/date/uitr_web/src'
 @ ./src/main.js 8:0-41
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

Answer 1

似乎您沒有CSS加載程序來處理js文件中的CSS，因此

首先，您需要安裝css-loader和style-loader：

npm install --save-dev css-loader style-loader

然后將插件添加到您的webpack配置中。 例如：

import 'bootstrap/css/bootstrap.min.css';

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
};