Как импортировать глобальное правило в файл sass без его компиляции?

Question

Мне нужно импортировать модуль antd css, и, если я помещу его в файл javascript, будет работать следующее:

import 'antd/dist/antd.css'

Однако, если я помещу следующее в мой global.sass file:

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

И импортировать его через import './global.sass' в моем js файле, css не загружается на страницу вообще.

Как мне вместо этого загрузить глобальный импорт в мой файл sass? Есть ли какая-то конфигурация веб-пакета для этого? Я использую style-loader, css-loader, postcss-loader, sass-loader.

Answer 1

Требовалось

2 критических вещей, один должен был поместить @import s в глобальную область, другой должен был удалить расширение .css при импорте файлов.

Окончательное решение выглядело так:

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

Я только узнал, как использовать глобальные стили в .sass при использовании онлайн-конвертера S CSS в SASS . Там есть обратная сторона sh.

И спасибо { ссылка } за это. Я не совсем поверил, что мне нужно было удалить расширение .css, пока я не заработал \:global и не прочитал то же самое в документации по Sass: @ import .

---

PS Что касается устаревшей проблемы @import, упомянутой в Sass: @ 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.