与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" 
    } 

在我styles.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] 
} 

，但是当我在我的头组件

import React from 'react'; 

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

export default Header; 

添加container类，它看起来像这样：

和build.js我找不到.container类。 .row以及等

内bootstrap.scss>>import grid容器会这样：

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

和_variables.scss内引导这个变量为真

$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;