Как я могу импортировать модули CSS в файл TypeScript? ⇐ CSS

[Anonymous]

Я сделал несколько изменений, которые перечислены ниже. .0). Я пытаюсь добавить немного стиля в свое приложение и пытаюсь использовать CSS -модули. Я попробовал несколько конфигураций WebPack, и ни один из них не заставляет WebPack использовать правильный загрузчик. Я попробовал несколько других вариантов погрузчиков (как видно в прокомментированных разделах), и ни один из них не работает. (Объявление SRC/Global.D.TS, устанавливая плагин компилятора TypeScript-Plugin-CSS-Modules для TSC и импорт как импорт * в качестве стилей из './styles.module.css')) >
stylesheet Import < /p>

Код: Выделить всё

import * as styles from './ResultCount.module.css'

export const ResultCount = () => {
const orders = useSelector((state: ReducedState) => state.all.orders)
console.log('result count style name', styles.results) // always undefined

return

src/globals.d.ts

Код: Выделить всё

declare module '*.module.css'
< /code>
Это ошибка, которую я получаю, независимо от конфигурации загрузчика, которую я использую < /p>
cached modules 1.59 MiB (javascript) 27.4 KiB (runtime) [cached] 131 modules
./src/components/Order/styles.module.css 96 bytes [built] [1 error]

ERROR in ./src/components/Order/styles.module.css 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> .order {
...
< /code>
Сможет ли кто -нибудь сказать мне, что я делаю не так в моем файле webpack.config.ts? < /p>
  module: {
rules: [
{
test: /\.tsx?$/,
loader: 'ts-loader',
options: {
transpileOnly: true
},
exclude: /dist/
},
{
test: /\.css$/,
use: [
"style-loader",
{
loader: "css-loader",
options: {
modules: true,
importLoaders: 1,
localIdentName: "[name]_[local]_[hash:base64]",
sourceMap: true,
minimize: true
}
}
]
},
// {
//   test: /\.css$/,
//   include: path.join(__dirname, 'src/components'),
//   loader: 'css-loader',
//   //use: ['style-loader', 'css-loader']
//   // use: [
//   //   'style-loader',
//   //   {
//   //     loader: 'typings-for-css-modules-loader',
//   //     options: {
//   //       modules: true,
//   //       namedExport: true
//   //     },
//   //   },
//   //   'css-loader',
//   // ],
// },
]
},

edit
Я обнаружил, что обслуживание Webpack должна быть перезапущена для таких изменений, которые будут повлиять ( Даже с перезагрузкой включена). Новая проблема: хотя WebPack успешно создает, но любой импорт классов в файлах .ts возвращает неопределенную . Так что ни один из стилей не применяется. Я обновил заголовок, чтобы отразить новую проблему. './styles.module.css' , но если я консоль.log () его до возвращения своего TSX, я всегда вижу неопределенное значение. Я подтвердил, что имена Meargled CSS модулей находятся на последней странице визуализации, находя встроенные стили в инспекторе браузера. Я также попытался объявить файл styles.module.css.d.ts (хотя мне не нужно, чтобы из -за плагина Typescript) на всякий случай, но это все еще не решило проблему. Я также пытался (из этого ответа) переименовать из styles.module.css до .module.css Но это также не сработало.
Кто -нибудь знает, что это может вызвать?

Подробнее здесь: https://stackoverflow.com/questions/744 ... cript-file