webpack2：如何导入bootstrap CSS for react-bootstrap来查找其

发布时间：2020-12-18 00:18:02 所属栏目：安全来源：网络整理

导读：我在我的项目中使用webpack 2和react-bootstrap;我找不到如何正确应用bootstrap CSS样式似乎没有加载.css文件,无论我尝试使用哪个import语句. 据我所知,我不需要使用javascript等完整的bootstrap包,因为我使用的是react-bootstrap;我只需要CSS.所以我在main.

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

据我所知,我不需要使用javascript等完整的bootstrap包,因为我使用的是react-bootstrap;我只需要CSS.所以我在main.js文件中添加了这个：

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

它似乎工作(没有错误信息)但样式不适用…

我按照webpack 2文档中的描述在我的webpack配置文件中配置了css加载器.

任何帮助,将不胜感激：)

解决方法

在css-loader中设置modules：true时,默认情况下CSS是本地作用域,但您需要它们全局可用.最简单的解决方案是删除模块：完全是真的.您仍然可以使用 :local在自己的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,那么您可以更加具体地包含/排除.

指定内联加载器

您可以在导入中指定加载器,webpack将使用超过已配置的加载器.您将导入bootstrap,如下所示：

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

这只是一个快速的解决方法,无需更改任何配置,但它可能不可取,特别是当有多个这样的情况.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!