Node_Module内の特定のファイルをインポートする方法

Question

これで、VueJSにwebpack-simpleを使用しています。私はAdminLTEというテーマをインストールしました。以下のコードでブートストラップファイルをインポートしようとしました。 npm run buildを実行すると、アプリケーションはsrcフォルダ内を検索しますが、AdminLTEはnode_modulesフォルダ内にあります。

必要なファイルだけをインポートするか、フォルダ全体をインポートする必要がありますか。そして、それらのファイルを正しくインポートするにはどうすればいいですか？

マイmain.jsをファイル

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

マイWebPACKのコンフィグ

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

おそらく、相対パスを使用してディレクトリを参照する必要があります。

あなたmain.jsを使用し、その後、/ srcの中にある場合：

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