@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

При сборке проект выдает такую ошибку.
  • Вопрос задан
  • 211 просмотров
Пригласить эксперта
Ответы на вопрос 2
olibro
@olibro
Фронтенд разработчик
В вашей конфигурации не хватает правила, которое бы могло применяться только к файлам по шаблону .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-...
Ответ написан
Комментировать
@Horoe
Это проблема связана с обновлением css-loader
Вот что нужно сделать в настрояках лоадера
{
            loader: 'css-loader',
            options: {
              modules: {
                namedExport: false,
                exportLocalsConvention: 'as-is',
              },
            },
          },
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы