Ładowanie modułów SASS za pomocą TypeScript w pakiecie Webpack 2

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" }

 ]

}

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ę.