Атрибут класса Preact пуст - PullRequest
Новая
       14

Атрибут класса Preact пуст

0 голосов
/ 31 мая 2019

Сегодня я пытаюсь использовать CSS в preact с веб-пакетом. Это почти работает для меня.

Это целевой код. В браузере атрибут класса пуст. Я пробовал className с тем же результатом, но CSS-код включен в комплект. 

import css from './todo-list.css';

export class C extends Component {
  render() {
    return <h1 class={css.bordered}>title</h1>;
  }
}

Если я просто импортирую CSS и нигде не буду ссылаться на него из кода тогда код CSS пропускается.

Итак, пока мой обходной путь - ссылаться где-нибудь на css и жестко кодировать CSS-классы как строковые литералы. 

import css from './styles.css';

export class C extends Component {
  render() {
    return <h1 class='bordered'><span class={css}>title</span></h1>;
  }
}

Мне не удалось обнаружить какую-либо проблему с className для preact. Похоже, что поддерживается из коробки без. Любые идеи об отладке атрибута класса приветствуются.

Версии: 

    "css-loader": "^2.1.1",
    "preact": "^8.4.2",
    "webpack": "^4.28.1"

Конфигурация погрузчика: 

      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader']
      },

В браузере css является функцией и возвращает пустой объект: 

_todo_list_css__WEBPACK_IMPORTED_MODULE_5___default
ƒ getModuleExports() { return module; }

1 Ответ

0 голосов
/ 31 мая 2019

Решение пришло после обнаружения способа настройки плагинов веб-пакетов, когда они передаются по конвейеру.

Эта конфигурация сработала для меня: 

      {
        test: /\.css$/i,
        use: [
          {
            loader: 'style-loader'      
          },
          {
            loader: 'css-loader',
            options: {
              modules: true
            }
          }
        ]         
      }
...