Ł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.js
tutaj
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.tsx
to punkt wejścia mojej aplikacji,
./src/raw/components/greetings/greeting.tsx
jest moim jedynym komponent React, a
./src/raw/components/styles.scss
to mój jedyny plik SCSS.
Zaproszony:
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

typings-for-css-modules-loader
-

to jest
https://github.com/Jimdo/typin ... oader
zamiennik dla
css-loader
(technicznie używa
css-loader
pod maską), co oznacza, że ​​pobiera CSS i konwertuje go na JavaScript. Używasz również
css-loader
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
modules: true
w module ładującym CSS (ani opcji
typings-for-css-modules-loader
, która przechodzi do
css-loader
).
Twoja reguła
.scss
powinna wyglądać następująco:
{
test:/\.scss$/,
include: [
path.resolve(__dirname, "src/raw")
],
use: [
{ loader: "style-loader" },
{
loader: "typings-for-css-modules-loader",
options: {
namedexport: true,
camelcase: true,
modules: true
}
},
{ loader: "sass-loader" }
]
}
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Oto nieco rozszerzona wersja (ponieważ powyższa jakoś nie działała dla mnie) wykorzystująca inny pakiet (
css-modules-typescript-loader
) pochodzący z przestarzałego
typings-for-css -modules -loader
.
Na wypadek, gdyby ktoś inny napotkał te same problemy - to jest konfiguracja, która działa dla mnie:

TypeScript + WebPack + Sass

webpack.config.js
module.exports = {
//mode: "production",
mode: "development", devtool: "inline-source-map", entry: [ "./src/app.tsx"/*main*/ ],
output: {
filename: "./bundle.js"// in/dist
},
resolve: {
// Add `.ts` and `.tsx` as a resolvable extension.
extensions: [".ts", ".tsx", ".js", ".css", ".scss"]
},
module: {
rules: [ { test:/\.tsx?$/, loader: "ts-loader" }, { test:/\.scss$/, use: [
{ loader: "style-loader" },// to inject the result into the DOM as a style block
{ loader: "css-modules-typescript-loader"},// to generate a .d.ts module next to the .scss file (also requires a declaration.d.ts with "declare modules '*.scss';" in it to tell TypeScript that "import styles from './styles.scss';" means to load the module "./styles.scss.d.td")
{ loader: "css-loader", options: { modules: true } },// to convert the resulting CSS to Javascript to be bundled (modules:true to rename CSS classes in output to cryptic identifiers, except if wrapped in a :global(...) pseudo class)
{ loader: "sass-loader" },// to convert SASS to CSS
// NOTE: The first build after adding/removing/renaming CSS classes fails, since the newly generated .d.ts typescript module is picked up only later
] }, ]
}
};

Umieść również
declarations.d.ts
w swoim projekcie:
// We need to tell TypeScript that when we write "import styles from './styles.scss' we mean to load a module (to look for a './styles.scss.d.ts'). 
declare module '*.scss';

A wszystko to, czego potrzebujesz w swoim
package.json
-th dev-dependencies:
"devDependencies": {
"@types/node-sass": "^4.11.0",
"node-sass": "^4.12.0",
"css-loader": "^1.0.0",
"css-modules-typescript-loader": "^2.0.1",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"ts-loader": "^5.3.3",
"typescript": "^3.4.4",
"webpack": "^4.30.0",
"webpack-cli": "^3.3.0"
}

Następnie powinieneś otrzymać
mystyle.d.ts
obok swojego
mystyle.scss
zawierającego zdefiniowane przez Ciebie klasy CSS, które możesz zaimportować jako moduł Typescript i używać w następujący sposób:
import * as styles from './mystyles.scss'; const foo = <div className={styles.myClass}>FOO;

CSS zostanie automatycznie załadowany (wstawiony jako element
style
w DOM) i będzie zawierał zaszyfrowane identyfikatory zamiast klas CSS w .scss, aby wyodrębnić style na stronie (chyba że użyjesz
: global (.a -global-class) {...}
).
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ę.

Aby odpowiedzieć na pytania, Zaloguj się lub Zarejestruj się