Постройте стили интерактивных инструментов как отдельный файл css

React- toolbox создает свой { test : /.(scss|css)$/ , loader : 'style-loader! Css-loader? SourceMap & modules & importLoaders = 1 & localIdentName = [name] - [local] ___ [hash: base64: 5] ! sass-loader? sourceMap ' } s по-своему. Все стили выглядят следующим образом: [link]

Этот способ включения, по-видимому, не поддерживается мобильными устройствами (или, по крайней мере, моим телефоном, для которого я создаю приложение). И когда я проверяю проект на мобильном устройстве, я получаю все без стилей.

На официальном сайте action-toolbox они включают все стили в виде отдельного файла .css, и все выглядит хорошо. Как я могу построить проект таким же образом?

Моя секция загрузчиков webpack.config выглядит следующим образом:

css-loader

javascript,reactjs,jsx,react-toolbox,

0

Ответов: 2


0

Хмммм ... Это может быть не ожидаемый ответ. Но я потратил много времени на ту же проблему. В зависимости от того, насколько продвинут ваш процесс разработки, вы можете проверить альтернативу: material-ui. Я всегда предпочитаю материал-ui над реакционной панелью.


0

В вашей конфигурации вы используете, style-loaderи styleпоэтому каждый необходимый файл вставляется в styleтег и вводится в документ. Это может создать некоторые проблемы FOUC при первом рендеринге, поэтому для производственных приложений вы можете использовать extract-text-webpack-plugin .

С этим плагином, когда вы создаете свой пакет при развертывании времени, webpack будет извлекать каждый стиль, который должен входить в тег стиля в отдельный файл CSS. Таким образом, вы можете включить свой CSS, как обычно, избегая проблем с FOUC и позволяя кэшировать и другие плюсы css.

React Toolbox использует этот плагин в примерах, поэтому проверьте конфигурацию для сайта spec и docs, или этого примера должно быть достаточно, чтобы заставить его работать!

JavaScript, reactjs, JSX, реагируют-набор инструментов,
Похожие вопросы