require("bootstrap/less/bootstrap.less");

[oneandonlyonebutyou]

I am using react with webpack (not create-react-app) and for some reason I cant get

require("bootstrap/less/bootstrap.less");

to work .. I wonder is this the same as

import 'bootstrap/dist/css/bootstrap.min.css';

please help me set this up. what I have is ...

[sergey-vayser-cherre]

yes, it's same. make sure you added either bootstrap.css or bootstrap.less to your project and configured webpack to load styles properly

[oneandonlyonebutyou]

Thank you so much How am I supposed to "configured webpack to load styles properly" ... I had

import 'bootstrap/dist/css/bootstrap.min.css';

in my code before .. how can I make it look as beautiful as the demo? :)

[wwwaiser]

@joseph-vedadi It depends of your webpack version. You can find webpack file at this repo and use it as a reference

[oneandonlyonebutyou]

Thank you so much for your help. Based on my understanding of your comment, the issue is my webpack .

But still, I can't find what I am missing

/* eslint-disable no-console */
const path = require('path')
const BundleTracker = require('webpack-bundle-tracker')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const ReactLoadableSSRAddon = require('react-loadable-ssr-addon')
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')
const webpack = require('webpack')

const SelectedPlugins = []
if (process.env.npm_lifecycle_script.includes('NODE_ANALYZER')) {
  console.log('Setting BundleAnalyzerPlugin Plugin')
  SelectedPlugins.push(new BundleAnalyzerPlugin({
    analyzerMode: 'server',
    generateStatsFile: true,
    statsOptions: { source: false },
    openAnalyzer: true
  }))
} else {
  SelectedPlugins.push(new webpack.optimize.ModuleConcatenationPlugin())
}
module.exports = {
  context: __dirname,

  entry: './front_end/resources/js/App.js',

  output: {
    path: path.resolve('./rafael/server/static/webpack_bundles/'),
    filename: '[name].bundle.js',
    chunkFilename: '[name].chunk.js',
    publicPath: './static/webpack_bundles/'
  },
  optimization: {
    nodeEnv: 'development',
    splitChunks: {
      cacheGroups: {
        commons: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all',
          minChunks: 2
        },
        default: {
          minChunks: 2,
          reuseExistingChunk: true
        }
      }
    }
  },
  devtool: 'cheap-module-eval-source-map',
  // SIMPLE DEV SERVER
  devServer: {
    contentBase: path.resolve(__dirname, './dist/'),
    disableHostCheck: true,
    host: '0.0.0.0',
    open: true
  },
  plugins: SelectedPlugins.concat([
    new MiniCssExtractPlugin({
      // Options similar to the same options in webpackOptions.put
      // all options are optional
      filename: '[name].css',
      chunkFilename: '[id].css',
      ignoreOrder: false // Enable to remove warnings about conflicting order
    }),
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, './front_end/templates/index.html'),
      cache: false,
      base: '/',
      favicon: path.resolve(__dirname, './front_end/resources/js/imgs/favicon.ico')
    }),
    new BundleTracker({
      path: './rafael/',
      filename: 'webpack-stats.json'
    }),
    new ReactLoadableSSRAddon({
      filename: 'react-loadable-ssr-addon.json'
    })
  ]),
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
        // query: {
        //   presets: ['react', 'es2015', 'react-hmre'],
        //   plugins: [],
        // },
      },
      {
        test: /\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              // you can specify a publicPath here
              // by default it uses publicPath in webpackOptions.put
              publicPath: '../',
              hmr: process.env.NODE_ENV === 'development'
              // include: '/node_modules[/\\]react-dropdown-tree-select/',
            }
          },
          'css-loader'
        ]
      },
      {
        test: /\.less$/,
        use: [
          {
            loader: 'style-loader'
          },
          {
            loader: 'css-loader',
            options: {
              sourceMap: true
            }
          },
          {
            loader: 'less-loader',
            options: {
              sourceMap: true
            }
          }
        ]
      },
      {
        test: /\.(jpe?g|gif|png|svg)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 10000
            }
          }
        ]
      },
      {
        test: /favicon\.ico$/,
        loader: 'url',
        query: {
          limit: 1,
          name: '[name].[ext]'
        }
      }
    ]
  },
  resolve: {
    extensions: ['*', '.js', '.jsx']
  }
}

[oneandonlyonebutyou]

@vayser Could you help me, please

[hocineismail]

i have the same problem with create-react-app and i found all class of pagination are null in code source from browser i try to find and fix this bug from node_modules

[oneandonlyonebutyou]

@hocineismail Actually :) I found that I was using BS4. So I just needed to add

              itemClass="page-item"
              linkClass="page-link"

to my

  <Pagination />

Please try that

[hocineismail]

yeah thank you so much now the css work

[ahsan-storm]

Please close this issue as @joseph-vedadi's answer solves the issue