时间戳

首页 > 解决方案 > :global 之前缺少空格

css - :global 之前缺少空格

问题描述

我正在尝试将 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',

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

标签： csstwitter-bootstrapwebpacksass

解决方案

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

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

修复：

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

推荐阅读