Ładowanie modułów SASS za pomocą TypeScript w pakiecie Webpack 2
Mam prosty projekt zbudowany przy użyciu TypeScript, ReactJS i SASS i chciałbym połączyć to wszystko z Webpack. Istnieje bogata dokumentacja pokazująca, jak to osiągnąć za pomocą JavaScript i zwykłego starego CSS. Jednak nie mogę znaleźć żadnej dokumentacji, która łączyłaby potrzebne mi programy ładujące i korzystała ze składni Webpack 2 (a nie oryginalnej składni Webpacka dla programów ładujących). Dlatego nie jestem pewien, jak stworzyć poprawną konfigurację.
Możesz znaleźć moje
plik
webpack.config.jstutaj
https://gist.github.com/jessic ... de853
.
Jak zmienić konfigurację, aby TypeScript akceptował moje moduły SCSS, a Webpack prawidłowo wiązał mój SCSS z moim TypeScript?
Może to być również pomocne: kiedy w tej chwili uruchamiam Webpack, pojawia się następujący błąd:
ERROR in ./node_modules/css-loader!./node_modules/typings-for-css-modules-loader/lib?{"namedExport":true,"camelCase":true}!./node_modules/sass-loader/lib/loader.js!./src/raw/components/styles.scss
Module build failed: Unknown word (1:1)> 1 | exports = module.exports = require("../../../node_modules/css-loader/lib/css-base.js")(undefined);
| ^
2 |// imports
3 |
4 | @ ./src/raw/components/styles.scss 4:14-206
@ ./src/raw/components/greetings/greetings.tsx
@ ./src/raw/index.tsx
@ multi ./src/raw/index.tsxERROR in [at-loader] ./src/raw/components/greetings/greetings.tsx:3:25
TS2307: Cannot find module '../styles.scss'.
Należy pamiętać, że
./src/raw/index.tsxto punkt wejścia mojej aplikacji,
./src/raw/components/greetings/greeting.tsxjest moim jedynym komponent React, a
./src/raw/components/styles.scssto mój jedyny plik SCSS.
Nie znaleziono powiązanych wyników
Zaproszony:
Aby odpowiedzieć na pytania, Zaloguj się lub Zarejestruj się
2 odpowiedzi
Anonimowy użytkownik
Potwierdzenie od:
to jest
https://github.com/Jimdo/typin ... oader
zamiennik dla (technicznie używa pod maską), co oznacza, że pobiera CSS i konwertuje go na JavaScript. Używasz również i kończy się to niepowodzeniem, ponieważ odbiera JavaScript, ale oczekiwany CSS (ponieważ JavaScript nie jest prawidłowym CSS, nie może przeanalizować).
Ponadto nie używasz modułów CSS, ponieważ nie ustawiasz opcji w module ładującym CSS (ani opcji , która przechodzi do ).
Twoja reguła powinna wyglądać następująco:
Anonimowy użytkownik
Potwierdzenie od:
Na wypadek, gdyby ktoś inny napotkał te same problemy - to jest konfiguracja, która działa dla mnie:
TypeScript + WebPack + Sass
Umieść również w swoim projekcie:
A wszystko to, czego potrzebujesz w swoim -th dev-dependencies:
Następnie powinieneś otrzymać obok swojego zawierającego zdefiniowane przez Ciebie klasy CSS, które możesz zaimportować jako moduł Typescript i używać w następujący sposób:
CSS zostanie automatycznie załadowany (wstawiony jako element w DOM) i będzie zawierał zaszyfrowane identyfikatory zamiast klas CSS w .scss, aby wyodrębnić style na stronie (chyba że użyjesz ).
zauważ, że
pierwsza kompilacja kończy się niepowodzeniem
za każdym razem, gdy dodajesz klasy CSS, usuń je lub zmień ich nazwę, ponieważ zaimportowany plik mystyles.d.ts jest starą wersją, a nie nową, wygenerowaną w czasie kompilacji. Po prostu skompiluj ponownie.
Cieszyć się.