css - :global 之前缺少空格

Question

我正在尝试将 css-loader 用于 :local 和 :global 样式，它工作正常，但是当我尝试全局导入库样式时，出现错误:

Missing whitespace before :global

这是我在我的主 scss 文件中尝试做的事情:

:global{
  @import "~bootstrap/scss/bootstrap";
}

我希望 Bootstrap 样式始终是全局的，所以我可以在我的元素中使用 .container .row 等等。
我的 webpack 配置:

{
  loader: 'css-loader',
  options: {
     modules: {
      localIdentName: '[path][name]__[local]--[hash:base64:5]',
    }  
  }
},
'postcss-loader',
'sass-loader',

难道我做错了什么？或者还有其他方法可以使 Bootstrap 作为全局工作

Answer 1

对于任何在网上搜索但没有解决方案的人(使用 css 模块确定 Bootstrap 范围)，我按照如下所述进行了这项工作。

首先，sass-loader 如何加载具有某些参数的文件存在问题，目前没有简单的方法来确定 bootstrap 4 scss 文件的范围，因此您必须使用他们推荐的 ruby setup 进行构建.对此的进一步解释是here .

修复:

我发现最简单的方法是从作用域选择器内的 Bootstrap 节点模块文件中导入主 Bootstrap CSS 文件，然后在父 div 上手动添加选择器。您必须关闭扩展，否则 sass 会将导入转换为普通的 css import .

main.scss 文件

:global {
  .bootstrap-scoped {
  @import 'node_modules/bootstrap/dist/css/bootstrap';
}

main.js

import './main.scss';
....
<div className='bootstrapScoped'>
  <button class='btn'>fake button</button>
</div>