Почему ошибка с компиляцией scss?

Question

gaming_shark @gaming_shark

Почему ошибка с компиляцией scss?

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

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

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

export default Counter;

WARNING in ./src/components/Counter.tsx 9:99-113
export 'default' (imported as 'classes') was not found in './Counter.module.scss' (possible exports: button)
@ ./src/App.tsx 2:0-43 5:72-79
@ ./src/index.tsx 3:0-24 5:17-20

При сборке проект выдает такую ошибку.

Вопрос задан 06 июн. 2024
832 просмотра

3 комментария

Подписаться 2 Простой 3 комментария

Антон Иванов @karminski

Покажите конфиг webpack в части rules. Предположу что поддержка scss модулей не подключены.

Написано 07 июн. 2024

gaming_shark @gaming_shark Автор вопроса

Антон Иванов,

export function buildLoaders(options: BuildOptions): RuleSetRule[] {
  const cssLoader = {
    test: /\.s[ac]ss$/i,
    use: [
      options.isDev ? 'style-loader' : MiniCssExtractPlugin.loader,
      {
        loader: 'css-loader',
        options: {
          modules: true,
        },
      },
      'sass-loader',
    ],
  };
  const typeLoader = {
    test: /\.tsx?$/,
    use: ['ts-loader'],
    exclude: /node_modules/,
  };
  return [typeLoader, cssLoader];
}

Написано 07 июн. 2024

Илья Бондаренко @ilyabond

gaming_shark, Когда ты исправишь эту проблему, ты скорее всего наткнешься на то, что classes у тебя будет - undefined. Сам столкнулся недавно: Почему не работают css-modules?

Написано 13 июн. 2024

Покажите конфиг webpack в части rules. Предположу что поддержка scss модулей не подключены.
Антон Иванов,
export function buildLoaders(options: BuildOptions): RuleSetRule[] { const cssLoader = { test: /\.s[ac]ss$/i, use: [ options.isDev ? 'style-loader' : MiniCssExtractPlugin.loader, { loader: 'css-loader', options: { modules: true, }, }, 'sass-loader', ], }; const typeLoader = { test: /\.tsx?$/, use: ['ts-loader'], exclude: /node_modules/, }; return [typeLoader, cssLoader]; }
gaming_shark, Когда ты исправишь эту проблему, ты скорее всего наткнешься на то, что classes у тебя будет - undefined. Сам столкнулся недавно: Почему не работают css-modules?

Answer 1 · 2024-07-03 12:22:49

Это проблема связана с обновлением css-loader
Вот что нужно сделать в настрояках лоадера

{
            loader: 'css-loader',
            options: {
              modules: {
                namedExport: false,
                exportLocalsConvention: 'as-is',
              },
            },
          },

Почему ошибка с компиляцией scss?

Войдите на сайт