bootstrap scss с reactjs, не добавляющим классы начальной загрузки

Я установил бутстрап, используя

npm install [email protected] --save

в моих зависимостях у меня есть:

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

в моих стилях.scss

@import '~bootstrap/scss/bootstrap';

и вот мой файл веб-пакета:

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 внутри бутстрапа эта переменная верна

$enable-grid-classes:       true !default;

так что не так?


reactjs css twitter-bootstrap sass bootstrap-sass
person gsiradze    schedule 14.09.2017    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы должны импортировать файл .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;
person David Maisuradze    schedule 14.09.2017