В нашем проекте мы используем комбинацию sass и styled-components! (у нас был sass с ранних дней, и теперь мы постепенно переходим к просто стилизованным компонентам) И у нашего проекта довольно типичный стек (react, typescript, webpack и ...)
Я недавно обновил наши styled-компоненты до версии 5.0.1 и начал сталкиваться со странной проблемой.
В mode: "development", когда я запускаю проект, при первом открытии страницы в браузере все в порядке. ... но после refre sh, мои стили начинают переопределять друг друга в неправильном порядке.
В mode: "production", конечно, он ломается с самого начала!
Я заметил что это происходит из-за неправильного размещения введенных <style /> по styled-components
Когда это правильно, порядок выглядит следующим образом (<style /> как-то между):
, но когда я переосмысливаю sh, он меняется на это (снижается после всех остальных <link /> с и <script /> с):
Я пробовал разные способы заставить его работать, но безуспешно ... наконец, понизив styleled-component до 4.4.1, проблема устранена, и порядок правильный:
Здесь также есть мой конфиг веб-пакета для файлов .sass, что опять-таки довольно стандартный
rules: [
{
test: /\.sass$/i,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
{
loader: "postcss-loader",
options: {
ident: "postcss",
plugins: [require("autoprefixer")()],
},
},
"sass-loader",
],
},
]
Я не был уверен, что это может быть правильно обработано в моем коде, или мне просто нужно подать вопрос / вопрос на странице github styled-components ... поэтому сначала задайте его здесь:)