webpack2:如何为 react-bootstrap 导入 Bootstrap CSS 以找到其样式? [英] webpack2: how to import Bootstrap CSS for react-bootstrap to find its styles?

问题描述

我在我的项目中使用 webpack 2 和 react-bootstrap；我找不到如何正确应用引导 CSS 样式，似乎 .css 文件没有加载，无论我尝试使用哪个 import 语句.

I am using webpack 2 and react-bootstrap in my project ; I can't find how to have bootstrap CSS styles properly applied it seems like the .css file is not loaded, no matter which import statement I tried to use.

据我所知，我不需要带有 javascript 等的完整引导程序包，因为我使用的是 react-bootstrap ；我只需要 CSS.所以我在我的 main.js 文件中添加了这个:

As far as I understand I do not need the full bootstrap package with javascript etc. since I am using react-bootstrap ; I just need the CSS. So I added this in my main.js file:

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

它似乎可以工作(没有错误消息)但没有应用样式...

It seems to work (no error message) but the styles are not applied...

我在 webpack 配置文件中配置了 css 加载器，如 webpack 2 文档中所述.

I configured the css loader in my webpack config file as described on webpack 2 documentation.

任何帮助将不胜感激:)

Any help would be appreciated :)

推荐答案

在 css-loader 中设置 modules: true 时，CSS 默认为本地作用域，但您需要它们在全球范围内可用.最简单的解决方案是完全删除 modules: true.您仍然可以使用 :local 在自己的 CSS 文件中使用模块.

When setting modules: true in the css-loader, the CSS is locally scoped by default, but you need them to be available globally. The simplest solution is to remove modules: true entirely. You could still use modules in your own CSS files by using :local.

但如果您想使用模块，有一些方法可以导入全局变量.

But if you would like to use modules, there are some workarounds to import globals.

不是为所有 CSS 文件启用模块，您可以制定两个不同的规则，以匹配所需的文件.因此，假设从 node_modules 导入的所有 CSS 都应视为常规(全局)CSS.规则如下所示:

Instead of enabling modules for all the CSS files, you can make two different rules, that match the desired files. So let's say all CSS imports from node_modules should be treated as regular (global) CSS. The rules would look like this:

{
  // 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，您可以更具体地包含/排除哪些内容.

Of course you can be more specific in what you want to include/exclude, if you don't want the entire node_modules.

您可以在 import 中指定加载器，webpack 将使用这些加载器而不是配置的加载器.您将按如下方式导入引导程序:

You can specify the loaders in the import and webpack will use those over the configured ones. You would import bootstrap as follows:

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

这只是一种无需更改任何配置的快速解决方法，但这可能并不理想，尤其是在有多个此类情况时.

This is just a quick workaround without having to change any config, but it's probably not desirable, especially when having multiple such cases.

这篇关于webpack2:如何为 react-bootstrap 导入 Bootstrap CSS 以找到其样式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！