css - 在 Webpack 中加载 CSS

Question

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

./node_modules/bootstrap/dist/css/bootstrap.min.css 中的错误:模块解析失败:意外标记 (6:3) 您可能需要适当的加载程序来处理此文件类型。

我已尽我所能使它正常工作，但恐怕我可能遗漏了一些非常明显的东西。

我将 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'
           }
        ]
    })
}