Snowpack - импортировать scss в tsx

Question

Я настраиваю проект Snowpack с целью переместить в него существующее приложение Create-React-App, как только все будет настроено одинаково.

Я не нашел способа импортировать .scss файл в .tsx файл однако.

В документации Snowpack, кажется, обсуждается только настройка scss как внешнего актива, предлагая поместить ваш scss в отдельный cssпапка { docs link }. Однако я бы хотел сохранитьscss файлы рядом с tsxкомпоненты, которым они принадлежат, и импортировать их в компонент, как я сейчас. Документы также ссылаются на сообщение в блоге, в котором обсуждается настройка с PostCSS, однако в этом сообщении говорится о некоторых проблемах с этим подходом, в том числе о том, что исходные карты не будут работать, что не сработает.

Я создал свой проект так:

npx create-snowpack-app my-sweet-app --template @snowpack/app-template-react-typescript --use-yarn

Затем я добавил новый файл scss, src/test.scss

$best-colour: tomato;

body {
    background-color: $best-colour;
}

и добавил импорт в мой src/App.tsx файл:

import './test.scss';

При беге yarn start Я получаю следующую ошибку:

[error] [404] /_dist_/test.css.proxy.js
    ✘ /home/me/repos/my-sweet-app/public/_dist_/test.css
    ✘ /home/me/repos/my-sweet-app/src/test.css

Можно ли настроить Snowpack для импорта файлов scss в файлы tsx, аналогично тому, как он работает в приложении Create React? Как?

Answer 1

Хотя у меня нет полного ответа, я столкнулся с той же проблемой, что и вы. Чего вы в основном хотите достичь, так это добавить дополнительные инструменты в конвейер сборки Snowpack.

Если вы добавите Babel с Snowpack, вы можете добавить произвольные абсурдные плагины babel для всех ваших потребностей преобразования.

Используя https://github.com/researchgate/babel-plugin-transform-scss-import-to-string и добавляя его в мои babel.config.js Мне удалось перенести мой материал Sassy в струнные.

Однако это не полное решение; потому что теперь Snowpack не улавливает изменения в моих файлах Sass...:(Похоже, что многие из этих новых анти-бандлеров - это просто так, они против объединения и, таким образом, объединения их с дополнительными материалами предварительной обработки, которые раньше были сделано нашими старыми добрыми сборщиками пакетов, громоздко.