如何在sass文件中导入全局规则而不将其编译掉

Question

我需要导入antdcss模块，如果我将其放置在javascript文件中，则如下所示：

import 'antd/dist/antd.css'

但是，如果我在global.sass文件中放置以下内容：

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

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

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

Answer 1

需要两件关键的事情，一件是将@import放在全局范围中，另一件是在导入文件时删除.css扩展名。

最终的解决方案看起来像：

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

我只是在使用在线转换器SCSS到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得到的。

为了正确构建此版本，我们必须使用sassnpm包，而不是node-sass。