-1
私はwepbackにブートストラップを統合しようとしています。私はこれにbootstrap-webpackを使用しています。Bootstrap + Webpackは私のブートストラップクラスを無視しています
bootsrapフォントが正しく表示されます。ただし、rowとcontainer-fluidのクラスはすべて無視されます。
私はDOMを調べて、bootstrap.cssファイルが見つかり、クラスがdivに適用されていることを確認できました。しかし、彼らはほとんど効果がないかのように見えます。
私が側によるAAAAAとBBBB側を期待。また、サイドバーとフォームが並べて表示される必要があります。
何か問題がありますか？
私のindex.html：
<!DOCTYPE html>
<html>
<head lang="en">
<title>Angular with Webpack</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body ng-app="app">
<h1>Bootstrap + Webpack</h1>
<div class="row">
<div class="span10">
aaaaaaaaaaaaaaa
</div>
<div class="span2">
bbbbbbbbb
</div>
</div>
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
<h1>Sidebar content</h1>
</div>
<div class="span10">
<p>Write some text in textbox: <input type="text" ng-model="sometext" /></p>
<p>Hello {{sometext}}</p>
</div>
</div>
</div>
<script src="bundle.js"></script>
</body>
</html>
index.jsファイル：
import 'expose?$!expose?jQuery!jquery';
import angular from 'angular';
import 'bootstrap-webpack';
var ngModule = angular.module('app', []);
webpack.config.file：あなただけの間違ったHTMLを使用している
module.exports = {
debug: true,
devtool: 'source-map',
context: __dirname + '/app',
entry: './index.js',
output: {
path: __dirname + '/app',
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader"
},
{
test: /\.css$/,
loader: 'style-loader!css-loader'
},
{test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/font-woff'},
{test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream'},
{test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file'},
{test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml'}
]
}
};