如何在不被编译的情况下将全局规则导入sass文件中？

Question

我需要导入antd css模块，如果将其放在javascript文件中，则可以使用以下功能：

import 'antd/dist/antd.css'

但是，如果我将以下内容放入我的global.sass文件中：

@use '~antd/dist/antd.css'

并通过import './global.sass'将其导入我的js文件中，css根本不会加载到页面上。

如何在我的sass文件中加载全局导入？是否有一些webpack配置可以做到这一点？我正在使用style-loader，css-loader，postcss-loader，sass-loader。

Answer 1

需要进行2项关键操作，一项是将@import放在全局范围内，另一项是在导入文件时删除.css扩展名。

最终的解决方案如下：

\:global
  @import '~antd/dist/antd'

我只发现在使用在线转换器SCSS to SASS时如何在.sass中使用全局样式。反斜杠是必须的。

感谢https://stackoverflow.com/users/3366943/user3366943的帮助。我不太相信我需要删除.css扩展名，直到我工作\:global并在Sass: @import的文档中阅读相同的内容。

---

P.S。关于Sass: @import中提到的@import被弃用的问题，没有它的方法是：

@use 'sass:meta'

\:global
  @include meta.load-css('~antd/dist/antd')

我是通过运行sass-migrator module --migrate-deps frontend/styles/App.sass来获得的。

要正确构建此版本，我们必须使用sass npm软件包而不是node-sass。