Javascript 自举&x2B；Webpack正在忽略我的引导类_Javascript_Css_Twitter Bootstrap_Webpack

Javascript 自举&x2B；Webpack正在忽略我的引导类

javascript css twitter-bootstrap webpack

Javascript 自举&x2B；Webpack正在忽略我的引导类,javascript,css,twitter-bootstrap,webpack,Javascript,Css,Twitter Bootstrap,Webpack,我正在尝试将引导集成到wepback中。我用这个引导字体确实正确显示。但是，忽略所有行和容器流体类我调查了DOM，可以确认找到了bootstrap.css文件，并且这些类应用于div。但看起来它们几乎没有效果我期待着AAAA和bbbb并排出现。此外，侧边栏和表单应该并排显示你知道怎么了吗 My index.html： <!DOCTYPE html> <html> <head lang="en"> <title>Angular wi

我正在尝试将引导集成到wepback中。我用这个

引导字体确实正确显示。但是，忽略所有

行

和

容器流体

类

我调查了DOM，可以确认找到了

bootstrap.css

文件，并且这些类应用于div。但看起来它们几乎没有效果

我期待着AAAA和bbbb并排出现。此外，侧边栏和表单应该并排显示

你知道怎么了吗

My 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>

webpack.config.file：

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'}
        ]
    }
};

例如，很确定您只是使用了不正确的HTML

缺少第一组：

第二组应为：

此外，列宽为

col-*-*

非

span*

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'}
        ]
    }
};