Доброго времени суток. Давно не занимался фронтом, решил написать небольшой проект. У меня есть шаблон, который я решил использовать, но перевести сборку c Webpack 4 на 5. Набор стандартный: React + TypeScript, Redux, Sass. Использую CSS модули.Стили в компоненты я импортирую так:
const styles = require('./styles.module.scss');
И чтобы назначить класс какому-либо элементу я писал так:
<h1 className={styles.title}>Hello World!</h1>
И все работало. Но теперь чтобы получить желаемый эффект приходится писать так:
<h1 className={styles.default.title}>Hello World!</h1>
Если я не добавлю default, то получу в импорте Module:
Module {
default: Object
title: "title___1pnWo"
__proto__: Object
Symbol(Symbol.toStringTag): "Module"
__esModule: true
get default: () => (__WEBPACK_DEFAULT_EXPORT__)
__proto__: Object
}
Перечитал документации, но ничего нового про такой стиль записи не нашел. Для css конфиг в Вебпаке такой:
test: /\.(scss|sass|css)$/,
use: [
{
loader: mode === 'development' ? 'style-loader' : MiniCssExtractPlugin.loader,
},
{
loader: 'css-loader',
options: {
sourceMap: mode === 'development',
importLoaders: 3,
modules: {
localIdentName: '[local]___[hash:base64:5]',
},
},
},
{
loader: 'sass-loader',
options: {
sourceMap: mode === 'development',
sassOptions: {
outputStyle: 'expanded',
},
},
},
{
loader: 'sass-resources-loader',
options: {
sourceMap: mode === 'development',
resources: `${resourcesPath}/**/*.scss`,
},
},
]
Что я делаю не так?
Средний
