添加引导程序时，Webpack无法编译

Question

我试图让我的反应应用程序上的引导组件工作 我按照指南https://dzone.com/articles/adding-react-bootstrap-to-a-react-app和https://github.com/facebookincubator/create-react-app/issues/301进行了操作。

当我将import 'bootstrap/dist/css/bootstrap.css';导入我的index.js时。我在webpack上遇到这个错误

我的webpack.config.js如下。

     module.exports = {
  entry: [
    './src/index.js'
  ],
  output: {
    path: __dirname,
    publicPath: '/',
    filename: 'bundle.js'
  },
  module: {
    loaders: [{
      exclude: /node_modules/,
      loader: 'babel',
      query: {
        presets: ['react', 'es2015', 'stage-1']
      }
    }]
  },
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  devServer: {
    historyApiFallback: true,
    contentBase: './'
  }
};

Answer 1

您需要style-loader和css-loader才能使用css文件。

...
module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      }
    ],
  },
...

  

注意：该配置适用于Webpack 2+。

对于Webpack 1：

...
module: {
    loaders: [
        { test: /\.css$/, loader: 'style-loader!css-loader' }
    ]
  },
...

只需安装style-loader和css-loader即可。

npm i css-loader style-loader -S

Answer 2

我知道这是一个旧线程，但是我对bootstrap和webpack遇到了同样的问题，但是将其直接导入到我的CSS文件中解决了这个问题。

希望它可以帮助某人。

/*package.json*/
"dependencies": {
  "bootstrap": "4.3.1"
},

/*css|scss file*/

@import '~bootstrap/scss/bootstrap.scss';