大家问候
我一直在使用Bootstrap for Webpack,但是我正要拔头发。我从字面上看了很多博客文章,他们要么使用了7个月过时的“ bootstrap-webpack”插件(令人惊讶的是,它不能立即使用),要么..它们通过导入'node_modules / * /包含了Bootstrap文件。 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正常工作),但是..我很好奇你们所有人的想法和行为。
提前致谢 :)
我强烈建议使用bootstrap-loader。您
.bootstraprc
在根文件夹中添加了一个配置文件,可以在其中排除不需要的引导元素,并告诉您variables.scss
和bootstrap.overrides.scss
在哪里。定义您的SCSS变量,进行覆盖,添加Webpack条目并继续生活。