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-loaderjavascript,reactjs,jsx,react-toolbox,
В вашей конфигурации вы используете, style-loaderи styleпоэтому каждый необходимый файл вставляется в styleтег и вводится в документ. Это может создать некоторые проблемы FOUC при первом рендеринге, поэтому для производственных приложений вы можете использовать extract-text-webpack-plugin .
С этим плагином, когда вы создаете свой пакет при развертывании времени, webpack будет извлекать каждый стиль, который должен входить в тег стиля в отдельный файл CSS. Таким образом, вы можете включить свой CSS, как обычно, избегая проблем с FOUC и позволяя кэшировать и другие плюсы css.
React Toolbox использует этот плагин в примерах, поэтому проверьте конфигурацию для сайта spec и docs, или этого примера должно быть достаточно, чтобы заставить его работать!