Reactjs React-在css模块中全局使用引导

我还没反应过来，所以我需要一些帮助。我最近将插件添加到我的项目中。经过一些麻烦之后，我让它工作起来了，所以我现在可以在我的组件中使用我的本地css文件。到目前为止还不错

不是，我想为整个应用程序添加引导。在我添加css模块插件之前，它已经工作了

以下是我代码的相关部分（我想……如果我遗漏了什么，请告诉我）：

index.js（我的应用程序的入口点）：

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

{
    "presets": [
        "react"
    ],
    "plugins": [
      ["react-css-modules", {
        "exclude": "node_modules"
      }]
    ]
}

.babelrc:

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

{
    "presets": [
        "react"
    ],
    "plugins": [
      ["react-css-modules", {
        "exclude": "node_modules"
      }]
    ]
}

webpack.config.js：

/* webpack.config.js */

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  devtool: 'eval',

  entry: [
    path.resolve('src/index.js'),
  ],

  output: {
    path: path.resolve('build'),
    filename: 'static/js/bundle.js',
    publicPath: '/',
  },

  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        include: path.resolve('src'),
        loader: 'babel-loader',
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
              modules: true,
              localIdentName: '[path]___[name]__[local]___[hash:base64:5]', // Add naming scheme
            },
          },
        ],
      },

    ],
  },

  plugins: [
    new HtmlWebpackPlugin({
      inject: true,
      template: path.resolve('src/index.html'),
    }),
  ],
}

欢迎任何建议。谢谢你抽出时间

哦，顺便说一句：我也想在我的应用程序中介绍SCS，我还不知道怎么做（还没有做过任何研究，但如果你们中有人知道怎么做，并且愿意解释，我会非常感激……不知道这是否是一个大的变化）

编辑： 我完全忘了添加我的组件：

import React, { Component } from "react";
import { Switch, Route, withRouter } from "react-router-dom";
import './style.css';

export default class HomeContainer extends Component {
  constructor() {

    super();
  }
  /* Test */
  render() {
    return (
      <div styleName="title">
        This woorks (styleprops from "title" are appliced"
        <button type="button" className="btn btn-primary">Primary</button> // Doesn't style the button :(
      </div>
    );
  }
}

import React，{Component}来自“React”；
从“react router dom”导入{Switch，Route，withRouter}；
导入“/style.css”；
导出默认类HomeContainer扩展组件{
构造函数（）{
超级（）；
}
/*试验*/
render（）{
返回(
此woorks（应用“标题”中的样式道具）
主//不设置按钮的样式：(
);
}
}

我自己找到了解决方案。我想把它贴在这里，也许有一天会有人需要它：

在网页包配置中定义两个规则：

{
  test: /\.css$/,
  exclude: /node_modules/,
  use: [
    'style-loader', {
      loader: 'css-loader',
      options: {
        importLoaders: 2,
        modules: true,
        localIdentName: '[path]___[name]__[local]___[hash:base64:5]', // Add naming scheme
      },
    },
  ],
},

// Second CSS Loader, including node_modules, allowing to load bootstrap globally over the whole project.
{
  test: /\.css$/,
  include: /node_modules/,
  use: ['style-loader', 'css-loader']
}