Twitter bootstrap Webpack导入bootstrap.js和.css
我正在使用react、bootstrap和webpack构建一个应用程序,使用es6和babel 但我无法将boostrap.js和bootstrap.css导入我的应用程序 My webpack.config.jsTwitter bootstrap Webpack导入bootstrap.js和.css,twitter-bootstrap,reactjs,webpack,Twitter Bootstrap,Reactjs,Webpack,我正在使用react、bootstrap和webpack构建一个应用程序,使用es6和babel 但我无法将boostrap.js和bootstrap.css导入我的应用程序 My webpack.config.js var webpack = require('webpack'), HtmlWebpackPlugin = require('html-webpack-plugin'), path = require('path'), srcPath = path.join(_
var webpack = require('webpack'),
HtmlWebpackPlugin = require('html-webpack-plugin'),
path = require('path'),
srcPath = path.join(__dirname, 'src');
module.exports = {
target: 'web',
cache: true,
entry: {
module: path.join(srcPath, 'module.js'),
common: ['react', 'react-router', 'alt']
},
resolve: {
root: srcPath,
extensions: ['', '.js'],
modulesDirectories: ['node_modules', 'src']
},
output: {
path: path.join(__dirname, 'tmp'),
publicPath: '',
filename: '[name].js',
library: ['Example', '[name]'],
pathInfo: true
},
module: {
loaders: [
{test: /\.js?$/, exclude: /node_modules/, loader: 'babel?cacheDirectory'}
]
},
plugins: [
new webpack.optimize.CommonsChunkPlugin('common', 'common.js'),
new HtmlWebpackPlugin({
inject: true,
template: 'src/index.html'
}),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
}),
new webpack.ProvidePlugin({
bootstrap: "bootstrap.css",
}),
new webpack.NoErrorsPlugin()
],
debug: true,
devtool: 'eval-cheap-module-source-map',
devServer: {
contentBase: './tmp',
historyApiFallback: true
}
};
因此,在我的.js文件(react组件)中,我正在尝试:导入“引导”。但是css并没有被实现。js导入工作得很好
那么如何导入boostrap或配置webpack?您需要执行以下操作才能使其正常工作:
resolve
部分,确保包含引导css文件路径var bootstrapPath = path.join(
__dirname,
'development/bower_components/bootstrap/dist/css'
);
然后在您的网页包配置对象中:
resolve: {
alias: {
jquery: path.join(__dirname, 'development/bower_components/jquery/jquery')
},
root: srcPath,
extensions: ['', '.js', '.css'],
modulesDirectories: ['node_modules', srcPath, commonStylePath, bootstrapPath]
}
加载程序:[{test:/\.css$/,加载程序:“样式加载程序!css加载程序”}]
require('bootstrap.min.css')代码>
只需使用较少的插件并正确声明它们
// Webpack file
{
test: /\.less$/,
loader: "style-loader!css-loader!less-loader"
},
// I have to add the regex .*? because some of the files are named like... fontello.woff2?952370
{
test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)(\?.*)?$/,
loader: 'url?limit=50000'
}
// Less file
@import '~bootstrap/less/bootstrap';
我仍在开发JS,但我会很快让您知道:-)我使用找到的指南完成了它:它只对加载bootstrap.css有帮助,但这就是我所需要的。