Nic*_*vda 26 javascript babel twitter-bootstrap webpack vue.js
问候一个,所有,
我一直在玩Webpack的Bootstrap,但我正在把我的头发撕掉.我从字面上通过博客文章的负荷了,他们要么使用7个月过时"自举的WebPack"插件(其中,令人惊讶的不开箱的)或.它们包括引导文件通过进口"node_modules/*/自举/ CSS/bootstrap.css'.
当然,必须有一种更清洁,更有效的方法来解决这个问题吗？
这是我目前的webpack.config.js档案:
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在其中工作),但是......我很好奇你们所想的和所做的事情.
提前致谢 :)
Sau*_*abh 13
我不确定这是不是最好的方法,但是跟我一起使用vue.jswebapp 很好.你可以在这里看到工作代码.
我在index.html中包含了bootstrap所需的文件,如下所示:
<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>
这很有效,你可以执行回购.为什么我这样做是因为我必须在bootstrap中自定义一些配置,所以我不得不更改变量文件并构建输出我和文件的bootstrap代码,我在这里使用.bootstrap.jsbootstrap.css
有建议的另一种方法在这里使用NPM包和定制的WebPack.
首先在项目中安装bootstrap:
npm install bootstrap@4.0.0-alpha.5
并确保您可以在组件中使用sass-loader:
npm install sass-loader node-sass --save-dev
现在转到webpack配置文件并添加sassLoader对象,其中包含以下内容:
sassLoader: {
includePaths: [
path.resolve(projectRoot, 'node_modules/bootstrap/scss/'),
],
},
projectRoot应该只指向你可以导航到的node_packages地方,在我的情况下,这是:path.resolve(__dirname, '../')
现在,您可以直接在.vue文件中使用bootstrap,webpack会在您添加以下内容时为您编译:
<style lang="scss">
@import "bootstrap";
</style>