Получаю undefined при использовании SCSS Module

Question

Пробую самостоятельно настроить Webpack для работы c SCSS и модулями. Вот так выглядит config:

const scssLoader = {
        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',
        ],
    }

Проект на TS, поэтому добавлен global.d.ts:

declare module '*.scss' {
    const content: { [className: string]: string }
    export default content
}

В данном коде пытаюсь использовать модульные стили, но получаю undefined. Объект styles = undefined

    import { useState } from 'react'
import styles from './App.module.scss'

export function App() {
    const [count, setCount] = useState(0)

    function increment() {
        setCount(count + 1)
    }

    return <div className={styles.btn}></div>
}

Answer 1

Я недавно настраивал webpack, используя похожую конфигурацию, и столкнулся с такой же проблемой.

Тут два варианта: либо установить [email protected] или более раннюю версию. Либо изменить импорт на:

import * as styles from './App.module.scss'

Потому что в 7.0.0 это изменили.

Answer 2

Попробуйте добавить namedExport: false в webpack config:

use: [
  "style-loader",
  {
    loader: "css-loader",
    options: {
      esModule: false,
      modules: {
        namedExport: false,
      }
    }
  }
]

Неплохо проверить, что в итоге экспортирует модуль.

Настройка webpack, возможно, некорректна, надо смотреть документацию MiniCssExtractPlugin.loader:

declare module '*.scss' {
    const content: { [className: string]: string }
    export default content
}

Обычно у меня:

declare module '*.scss' {
    const classes: { [key: string]: string };
    export default classes;
}

Модуль css-loader поддерживает два режима:

namedExport: false,
namedExport: true

При namedExport: false в модуле будет создаваться переменная classes c хешированными именами, и ее можно экспортировать:

import style from my.scss

При namedExport: true модуль экспортируется:

import * as style from my.css

БЛОГ НА HUSL

Получаю undefined при использовании SCSS Module

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