WebPack2:如何导入Bootstrap CSS以找到React-Bootstrap以找到其样式

Question

我正在使用webpack 2，并且在项目中使用了react-bootstrap；我找不到如何正确应用Bootstrap CSS样式，无论我尝试使用哪种import语句，似乎都没有加载.css文件。

据我所知，我不需要带有JavaScript等的完整bootstrap软件包。因为我正在使用React-Bootstrap；我只需要CSS。因此，我在main.js文件中添加了此内容：

import 'bootstrap/dist/css/bootstrap.css';

它似乎有效（没有错误消息），但未应用样式...

我在WebPack 2文档中所述的WebPack配置文件中配置了CSS加载程序。

任何帮助将不胜感激：）

Answer 1

在css-loader中设置modules: true时，CSS默认情况下是本地范围范围的，但是您需要在全球上可用。最简单的解决方案是完全删除modules: true。您仍然可以通过以下方式使用以下方式使用自己的CSS文件中的模块。

但是，如果您想使用模块，则有一些解决方法可以进口全球。

定义单独的规则

，您可以制定两个不同的规则，即与所需的文件匹配，而不是为所有CSS文件启用模块。因此，假设所有从node_modules进口的CSS都应将其视为常规（全局）CSS。规则看起来像这样：

{
  // For all .css files except from node_modules
  test: /.css$/,
  exclude: /node_modules/,
  use: [
    'style-loader',
    { loader: 'css-loader', options: { modules: true } }
  ]
},
{
  // For all .css files in node_modules
  test: /.css$/,
  include: /node_modules/,
  use: ['style-loader', 'css-loader']
}

当然，如果您不想要整个node_modules。

指定加载程序内联

您可以在import中指定加载程序，WebPack将使用这些加载程序在配置的加载程序上。您将导入Bootstrap如下：

import '!style-loader!css-loader!bootstrap/dist/css/bootstrap.css';

这只是一个快速的解决方法，而无需更改任何配置，但这可能不是可取的，尤其是在有多种情况下。