So importieren Sie bestimmte Dateien in Node_Modules

Question

Okay, ich benutze Webpack-einfach für VueJS. Ich habe ein Theme namens AdminLTE installiert. Ich habe versucht, die Bootstrap-Dateien darin über den folgenden Code zu importieren. Wenn ich npm run build ausführen, sucht die App im Ordner Src, aber AdminLTE befindet sich im Ordner node_modules.

Sollte ich nur die Dateien importieren, die ich brauche, oder sollte ich den gesamten Ordner importieren. Und wie importiere ich diese Dateien richtig?

Meine main.js Datei

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

// import BootstrapCSS from 'admin-lte/bootstrap/bootstrap.min.css' 
// import BootstrapCSSTheme from 'admin-lte/bootstrap/bootstrap-theme.min.css' 
import 'admin-lte/bootstrap/bootstrap.min.css' 
import 'admin-lte/bootstrap/bootstrap-theme.min.css' 


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

Mein Webpack Config

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: { 
      } 
      // other vue-loader options go here 
     } 
     }, 
     { 
     test: /\.js$/, 
     loader: 'babel-loader', 
     exclude: /node_modules/ 
     }, 
     { 
     test: /\.css$/, 
     use: ['style-loader','css-loader'] 
     }, 
     { 
     test: /\.(png|jpg|gif|svg)$/, 
     loader: 'file-loader', 
     options: { 
      name: '[name].[ext]?[hash]' 
     } 
     } 
    ] 
    }, 
    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 
    }) 
    ]) 
} 

Answer 1

Sie wahrscheinlich das Verzeichnis mit einem relativen Pfad verweisen müssen.

Wenn Ihr main.js in/src, dann verwenden:

import '../node_modules/admin-lte/bootstrap/bootstrap.min.css'