在 Webpack 中加载 CSS

Question

我正在尝试按照官方网站 (https://getbootstrap.com/docs/4.0/getting-started/webpack/) 上的说明使用 Webpack (v4.5) 在我的应用程序中包含引导 css 文件，但在运行 webpack 时出现以下错误。

ERROR in ./node_modules/bootstrap/dist/css/bootstrap.min.css Module parse failed: Unexpected token (6:3) You may need an appropriate loader to handle this file type.

我已经尝试了所有我能想到的方法来让它工作，但我担心我可能遗漏了一些非常明显的东西。

我将 css 导入到我的代码中：import 'bootstrap/dist/css/bootstrap.min.css';

我的 webpack 配置看起来像：

  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /js$/,
        exclude: /(node_modules)/,
        loader: 'babel-loader',
        query: { presets: ['react-app'] },
      },

    ],
  }

我同时安装了 css-loader 和 style-loader，并且正在使用 bootstrap 在其文档中显示的相同 webpack 配置。

谁能看出我做错了什么？

Answer 1

先做这个

npm install --save-dev css-loader

然后是这个

npm install --save-dev style-loader

安装后像这样改变你的配置

{
    test: /\.css$/,
    exclude: /node_modules/,
    use: ExtractTextPlugin.extract({
       fallback: "style-loader",
       use: [
           {
              loader: 'css-loader'
           },
           {
              loader: 'style-loader'
           }
        ]
    })
}