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

问题描述

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

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 2文档中的说明在我的webpack配置文件中配置了css加载器.

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:如何导入Bootstrap CSS以进行react-bootstrap以查找其样式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！