React-css-modules: имя стиля не распознано

У меня проблема с модулями react-css. Я не могу найти классы, которые я связал по имени стиля. Они не отображаются как классы в отображаемом html.

Вот код:

import React from 'react';
import CSSModules from 'react-css-modules';
import styles from './ListItem.css'

@CSSModules(styles)
export class ListItem extends React.Component {
    render() {

        return (
            <li className="panel" styleName="list-item">
                <h3 className="uppercase m-t-0 m-b-0 relative" styleName="title">
                ...

                </h3>
            </li>);
        }
}

И конфигурация webpack:

     module: {
        loaders: [
            ...
            {
                test: /\.css$/,
                loaders: [
                    require.resolve('style-loader'),
                    require.resolve('css-loader') + '?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'
                ]
            },
            ...
         ]
      }

Так что же здесь не так?


reactjs css react-css-modules
person Anoush Hakobyan    schedule 04.07.2016    source источник
comment
Я не знаю, связано ли это с css-модулями, но обычно в React вы должны использовать className для добавления атрибута класса к элементу.   -  person pawel    schedule 04.07.2016
comment
styleName исходит из css-модулей.   -  person Anoush Hakobyan    schedule 04.07.2016
comment
@AnoushHakobyan Ты когда-нибудь мог это понять? у меня такая же проблема   -  person flo527    schedule 11.08.2018

Ответы (1)


arrow_upward
0
arrow_downward

Если это поможет, вот мой массив загрузчиков в конфигурации веб-пакета:

loaders: [
            'style?sourceMap',
            'css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'
          ]

Возможно, sourceMap, используемый в styleLoader, а не в загрузчике css, имеет к этому какое-то отношение.

Кроме того, вы можете попытаться избежать использования аннотации @CSSModules(styles) и использовать обычный способ, например. export default CSSModules(ListItem, styles), чтобы узнать, есть ли проблема с аннотацией.

Кроме этого, я не вижу, что не так.

person Héctor    schedule 10.08.2016