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