带有reactjs的引导scss不添加引导类

Question

我已经安装了引导程序

npm install bootstrap@4.0.0-alpha.6 --save

在我的依赖项中：

 "dependencies": {
    "bootstrap": "^4.0.0-alpha.6",
    "react": "^15.6.1",
    "react-dom": "^15.6.1"
  }

在我的 style.scss 中

@import '~bootstrap/scss/bootstrap';

这是我的 webpack 文件：

const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
    template: './src/index.html',
    filename: 'index.html',
    inject: 'body'
})

module.exports = {
    entry: './src/index.js',
    output: {
        path: __dirname + '/dist',
        filename: 'build.js'
    },
    devServer: {
        historyApiFallback: true
    },
    module: {
        loaders: [
            { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ },
            { test: /\.jsx?$/, loader: 'babel-loader', exclude: /node_modules/ },
            {
                test: /\.scss$/,
                use: [
                    'style-loader',
                    'css-loader?importLoaders=1&modules&localIdentName=[name]_[local]_[hash:base64:5]',
                    'sass-loader',
                ],
            }
        ]
    },
    plugins: [HtmlWebpackPluginConfig]
}

但是当我在我的标题组件中添加container 类时

import React from 'react';

export class Header extends React.Component {
    render() {
        return(
          <header className="container">header here</header>
        );
    }
}

export default Header;

看起来像这样：

在build.js 我找不到.container 类。 .row 等等。

在bootstrap.scss>>import grid 容器内看起来是这样的：

@if $enable-grid-classes {
  .container {
    @include make-container();
    @include make-container-max-widths();
  }
}

并且在 _variables.scss 里面 bootstrap 这个变量是真的

$enable-grid-classes:       true !default;

那怎么了？

Answer 1

您必须在组件中导入 .scss 文件并在 html 中应用。喜欢：

import React from 'react';
import styles from './styles.scss'; // your .scss file

export class Header extends React.Component {
    render() {
        return(
          <header className={styles.container}>header here</header>
        );
    }
}

export default Header;