Ошибка импорта модулей стилей

Question

Подскажите, разворачивая проект столкнулся с ошибкой - при импорте модулей scss они приходят как undefined

import React, { useState } from "react";
import classes from "./Counter.module.scss";

const Counter = () => {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  };
  console.log(classes); //undefined
  return (
    <div className={classes.btn}>
      <h1>{count}</h1>
      <button onClick={increment}>increment</button>
    </div>
  );
};

export default Counter;

global.d.ts

declare module "*.scss" {
  interface IClassNames {
    [className: string]: string;
  }
  const classnames: IClassNames;
  export = classnames;
}

loaders

export function buildLoaders({ isDev }: BuildOptions): webpack.RuleSetRule[] {
  const cssLoader = {
    test: /\.s[ac]ss$/i,
    use: [
      isDev ? "style-loader" : MiniCssExtractPlugin.loader,
      {
        loader: "css-loader",
        options: {
          modules: {
            auto: (resPath: string) => Boolean(resPath.includes(".module.")),
            localIdentName: isDev ? "[path][name]__[local]" : "[hash:base64:8]",
          },
        },
      },
      "sass-loader",
    ],
  };

  const typescriptLoader = {
    test: /\.tsx?$/,
    use: "ts-loader",
    exclude: /node_modules/,
  };

  return [typescriptLoader, cssLoader];
}

Answer 1

По умолчанию Node.js позволяет загружать модули CommonJS import sass from 'sass' из модулей ECMAScript с использованием синтаксиса . Сейчас это устарело; Вместо этого пользователям ESM следует использовать import * as sass from 'sass'.

Исторически Dart Sass был доступен только как модуль CommonJS. Это означало, что любой, кто использовал его из проекта, в котором использовалась встроенная поддержка модуля ECMAScript Node.js, мог загрузить его, как если бы он обеспечивал экспорт по умолчанию:

import sass from 'sass';

Это никогда не планировалось командой Sass и не соответствовало объявлениям типов, предоставленным в пакете, но это работало . Мы решили удалить эту поддержку в Dart Sass 2.0.0 и потребовать, чтобы пользователи модуля ECMAScript использовали только именованные экспорты пакета:

import * as sass from 'sass';

https://sass-lang.com/documentation/breaking-changes/default-export/

БЛОГ НА HUSL

Ошибка импорта модулей стилей

Ответы (1 шт):