:global 之前缺少空格

Question

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

Missing whitespace before :global

这是我在主 scss 文件中尝试执行的操作：

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

我希望引导程序样式始终是全局的，所以我可以在我的项目中使用 .container .row 等等。
我的 webpack 配置：

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

难道我做错了什么？或者有其他方法可以使引导程序在全球范围内工作

Answer 1

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

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

修复：

我发现的最简单的方法是从作用域选择器内的引导节点模块文件导入主引导 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>