将Bootstrap纳入Webpack配置时出现错误

编程问答 2022-08-13

问题描述

我目前正在尝试将Bootstrap合并到使用Webpack的React项目中。我已经解决了几个问题，试图使Webpack设置为使用Bootstrap，但目前无法解决此问题。我已经尝试过寻找答案，但是还没有提出任何答案。我什至遵循了BootStrap文档，但这没有用。当我去编译我的JSX时，控制台中出现以下错误。

ERROR in ./node_modules/bootstrap/dist/css/bootstrap.min.css
Module build Failed (from ./node_modules/style-loader/dist/cjs.js):
ValidationError: Invalid options object. Style Loader has been initialized using an options object that does not match the API schema.
 - options should be an object:
   object { injectType?,attributes?,insert?,base?,esModule? }
    at validate (/home/game-app/node_modules/schema-utils/dist/validate.js:98:11)
    at Object.loader (/home/game-app/node_modules/style-loader/dist/index.js:25:28)
 @ ./src/index.jsx 4:0-46

我认为我已经很接近设置它了，但是Webpack不喜欢它如何提供引导数据。在这个问题上的任何帮助将不胜感激。如有必要，我也可以提供我的webpack.config文件。

谢谢！

编辑：

Webpack配置

const HtmlWebPackPlugin = require('html-webpack-plugin');
const path = require('path');

const htmlPlugin = new HtmlWebPackPlugin({
  template: './src/index.html',filename: './index.html',});
module.exports = {
  entry: './src/index.jsx',output: { // NEW
    path: path.join(__dirname,'dist'),filename: '[name].js',},// NEW Ends
  plugins: [htmlPlugin],module: {
    rules: [
      {
        test: /\.(js|jsx)$/,exclude: /node_modules/,use: {
          loader: 'babel-loader',{
        test: /\.css$/,use: ['style-loader','css-loader'],],resolve: {
    extensions: ['.js','.jsx'],};

edit2：

.babelrc 

{
  "presets": ["@babel/preset-env","@babel/preset-react"]
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

javascriptreactjsreactjsreactjsreactjstwitter-bootstrapwebpackwebpackwebpack