极客观点
项目管理
HarmonyOS
问候大家，
我一直在玩 Webpack 的 Bootstrap，但我快要崩溃了。我确实浏览了大量的博客文章，他们要么使用 7 个月过时的“bootstrap-webpack”插件（令人惊讶的是它不能开箱即用），要么..他们通过导入“node_modules/*/”包含 Bootstrap 文件引导程序/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 在其中工作），但是..我很好奇你们都在想什么和做了什么。
提前致谢 ：）
原文由 Nickvda 发布，翻译遵循 CC BY-SA 4.0 许可协议
我不确定这是否是最好的方法，但是使用
vue.jswebapp 对我来说很好。您可以在 此处 查看工作代码。我在 index.html 中包含了 bootstrap 所需的文件，如下所示：
这有效，您可以执行回购。为什么我这样做是因为我必须在 引导程序 中自 定义 一些配置，所以我不得不更改变量文件并构建输出我的引导程序代码
bootstrap.js和bootstrap.css文件，我我在这里使用。这里 建议使用 npm 包和 webpack 定制的替代方法。
首先在你的项目中安装 bootstrap：
并确保您可以在组件中使用 sass-loader：
现在转到您的 webpack 配置文件并使用以下内容添加一个 sassLoader 对象：
projectRoot应该指向你可以导航到node_packages的位置，在我的例子中是：path.resolve(__dirname, '../')现在你可以直接在你的 .vue 文件中使用 bootstrap，webpack 会在你添加以下内容时为你编译它：