Question

我已经使用

安装了bootstrap

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

但是当我在标题组件

中添加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中此变量为true

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

bootstrap scss with reactjs没有添加bootstrap类

1 个答案: