在 Webpack 中使用 Bootstrap 的首选方式 [英] Preferred way of using Bootstrap in Webpack
问题描述
大家好，
我一直在玩用于 Webpack 的 Bootstrap，但我已经迫不及待了.我确实浏览了大量的博客文章，他们要么使用了 7 个月过时的bootstrap-webpack"插件(令人惊讶的是，它不能开箱即用)，或者……它们通过 import 'node_modules/*/包含 Bootstrap 文件bootstrap/css/bootstrap.css'.
I have been playing around with Bootstrap for Webpack, but I'm at the point of tearing my hair out. I have literally gone through loads of blog articles and they either use the 7 months outdated 'bootstrap-webpack' plugin (which, surprisingly does not work out of the box) or.. They include the Bootstrap files through import 'node_modules/*/bootstrap/css/bootstrap.css'.
当然，必须有一种更清洁、更有效的方法来解决这个问题吗?
Surely, there must be a cleaner and more efficient way of going about this?
这是我当前的 webpack.config.js 文件:
This is my current webpack.config.js file:
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var autoprefixer = require('autoprefixer');
var path = require('path');
module.exports = {
entry: {
app: path.resolve(__dirname, 'src/js/main.js')
},
module: {
loaders: [{
test: /.js[x]?$/,
loaders: ['babel-loader?presets[]=es2015&presets[]=react'],
exclude: /(node_modules|bower_components)/
}, {
test: /.css$/,
loaders: ['style', 'css']
}, {
test: /.scss$/,
loaders: ['style', 'css', 'postcss', 'sass']
}, {
test: /.sass$/,
loader: 'style!css!sass?sourceMap'
},{
test: /.less$/,
loaders: ['style', 'css', 'less']
}, {
test: /.woff$/,
loader: "url-loader?limit=10000&mimetype=application/font-woff&name=[path][name].[ext]"
}, {
test: /.woff2$/,
loader: "url-loader?limit=10000&mimetype=application/font-woff2&name=[path][name].[ext]"
}, {
test: /.(eot|ttf|svg|gif|png)$/,
loader: "file-loader"
}]
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '/js/bundle.js',
sourceMapFilename: '/js/bundle.map',
publicPath: '/'
},
plugins: [
new ExtractTextPlugin('style.css')
],
postcss: [
autoprefixer({
browsers: ['last 2 versions']
})
],
resolve: {
extensions: ['', '.js', '.sass'],
modulesDirectories: ['src', 'node_modules']
},
devServer: {
inline: true,
contentBase: './dist'
}
};
我可以去require('bootstrap')(通过某种方式让jQuery 在其中工作)，但是.. 我很好奇你们的想法和行为.
I could go and require('bootstrap') (with some way of getting jQuery in it to work), but.. I'm curious to what you all think and do.
提前致谢:)
推荐答案
我不确定这是否是最好的方法，但是使用 vue.js webapp 对我来说很好.您可以在此处查看工作代码.
I am not sure if this is the best way, but following work for me well with vue.js webapp. You can see the working code here.
我在 index.html 像这样:
<head>
<meta charset="utf-8">
<title>Hey</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<link rel="stylesheet" href="/static/bootstrap.css" type="text/css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script>
<script href="/static/bootstrap.js"></script>
</head>
这行得通，你可以执行 repo.我之所以这样做是因为我必须在 customise 一些配置="http://v4-alpha.getbootstrap.com/" rel="noreferrer">bootstrap 所以我不得不更改变量文件并构建输出我的引导程序代码 bootstrap.js 和 bootstrap.css 文件，我在这里使用.
And this works, you can execute the repo. Why I went this way was I had to customise some config in bootstrap so I had to change the variables file and build the code of bootstrap which outputted me bootstrap.js and bootstrap.cssfiles, which I am using here.
此处建议使用 npm 包和 webpack 自定义的替代方法.
There is an alternative way suggested here by using the npm package and a webpack customisation.
首先在您的项目中安装引导程序:
First install bootstrap in your project:
npm install bootstrap@4.0.0-alpha.5
并确保您可以在组件中使用 sass-loader:
And make sure you can use sass-loader in your components:
npm install sass-loader node-sass --save-dev
现在转到您的 webpack 配置文件并添加一个 sassLoader 对象，其中包含以下内容:
now go to your webpack config file and add a sassLoader object with the following:
sassLoader: {
includePaths: [
path.resolve(projectRoot, 'node_modules/bootstrap/scss/'),
],
},
projectRoot 应该只是指向你可以导航到 node_packages 的位置，在我的例子中是: path.resolve(__dirname, '../')
projectRoot should just point to where you can navigate to node_packages from, in my case this is: path.resolve(__dirname, '../')
现在你可以直接在你的 .vue 文件中使用 bootstrap，当你添加以下内容时，webpack 会为你编译它:
Now you can use bootstrap directly in your .vue files and webpack will compile it for you when you add the following:
<style lang="scss">
@import "bootstrap";
</style>
这篇关于在 Webpack 中使用 Bootstrap 的首选方式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
