How to Import Specific Files Inside Node_Modules
10,772
You probably need to reference the directory using a relative path.
If your main.js is in /src, then use:
import '../node_modules/admin-lte/bootstrap/bootstrap.min.css'
Author by
Kay Singian
Updated on July 23, 2022Comments
-
Kay Singian almost 2 years
Okay, so I am using webpack-simple for VueJS. I installed a theme called AdminLTE. I tried to import the bootstrap files inside it via the code below. When I run
npm run build
, the app searches inside the src folder but AdminLTE is inside node_modules folder.Should I import just those files that I need, or should I import the whole folder. And How do I properly import those files?
My main.js file
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) })
My 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 }) ]) }