css - 在 Webpack 中加载 CSS

Question

我正在尝试使用 Webpack (v4.5) 使用官方网站 ( https://getbootstrap.com/docs/4.0/getting-started/webpack/ ) 上的说明将引导 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 配置。

谁能看到我做错了什么？

标签： csstwitter-bootstrapwebpackbootstrap-4

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