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

Question

[gaming_shark]

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

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

Comments

[Антон Иванов]

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

[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];
}

[Илья Бондаренко]

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

Answer 1

[Horoe]

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

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

Comments

[ttscript]

Большое спасибо, добрый человек! Мне помогло решить проблему с импортом модулей после многих часов поиска. Оказалось достаточно добавить namedExport: false, без exportLocalConvention

Answer 2

[Егор Иванов]

В вашей конфигурации не хватает правила, которое бы могло применяться только к файлам по шаблону .module.scss. Можно сделать вот так, путем добавления нового объекта:

const cssModulesLoader = {
    test: /\.module\.s[ac]ss$/i,
    use: [
      options.isDev ? 'style-loader' : MiniCssExtractPlugin.loader,
      {
        loader: 'css-loader',
        options: {
          modules: {
            localIdentName: options.isDev ? '[path][name]__[local]' : '[hash:base64]',
          },
        },
      },
      'sass-loader',
    ],
  };

  
  return [cssModulesLoader];
}

cssModulesLoader будет применяться только к файлам, соответствующим шаблону .module.scss. В нем включена опция modules, которая активирует CSS модули. После этого, можно импортировать стили как модули в ваш компонент.

Подробнее об этом можно почитать здесь:
https://www.fatalerrors.org/a/webpack-css-to-sass-...