I need use bootstrap 3 on my vue app. I do following:
vue init webpack-simple
npm install jquery bootstrap
after this I add to webpack.config.js
module.exports = {
...
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
}),
]
}
and add to src/main.js
window.$ = window.jQuery = require('jquery')
import 'bootstrap'
and got error in browser:
Uncaught ReferenceError: jQuery is not defined
how I can resolve this problem?
UPDATE:
I maked like say @Sandwell, but no have bootstrap.css in result. I add line to src/main.js
import Bootstrap from 'bootstrap/dist/css/bootstrap.css'
and got webpack compilation error:
./node_modules/bootstrap/dist/fonts/glyphicons-halflings-regular.ttf Module parse failed: Unexpected character '' (1:0) You may need an appropriate loader to handle this file type. (Source code omitted for this binary file) @ ./node_modules/css-loader!./node_modules/bootstrap/dist/css/bootstrap.css 6:4790-4842 @ ./node_modules/bootstrap/dist/css/bootstrap.css @ ./src/main.js @ multi (webpack)-dev-server/client? http://localhost:8080 webpack/hot/dev-server ./src/main.js
I have loader in webpack.config.js module.rules:
{
test: /\.(png|jpg|gif|svg|ttf)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
For webpack 2
I did a vendor bundle for my libs. It should work this way.
module.exports = {
entry: {
app: 'path/to/initapp.js',
vendor: ['jQuery', 'Bootstrap']
}
output: {
path: rootPath + 'public/',
filename: 'js/[name].js'
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
names: ['vendor']
})
]
}
then jQuery should be in the vendor.js bundle Do not forget to import it in your initapp.js
import 'bootstrap';
import jQuery from 'jQuery'
window.jQuery = jQuery
You should check this doc for more details
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.