Testing
app.build.items.precss.setLoader('minicss');
app.hooks.action('build.before', (bud) => {
bud.extensions.get('@roots/bud-extensions/mini-css-extract-plugin').enable(true);
});
as mentioned by @oxyc at Compile CSS files in dev mode - #9 by oxyc .
Seems to be working. I see font styling applied on desktop, tablet and mobile in Gutenberg editor now. Do not seer two columns for tablet yet though, but perhaps
,,,
* Desktop: Three columns */
.wp-block-cover .block-editor-block-list__block.wp-block-columns {
display: flex;
flex: 1 1 calc(33.333% - 20px);
}
/* Tablets: Two columns */
@media (min-width: 763px) and (max-width: 1024px) {
.wp-block-cover .block-editor-block-list__block.wp-block-columns {
flex: 1 1 calc(50% - 20px);
}
}
/* Mobile: One column */
@media (max-width: 762px) {
.wp-block-cover .block-editor-block-list__block.wp-block-columns {
flex: 1 1 100%;
}
}
,,,
in editor.css don’t get applied properly. Checking some more.
Post yarn dev in Sage 10 in editor on tablet view I also get
Uncaught TypeError: Cannot read properties of null (reading 'createInfoNotice')
at handler (editor.js:35:86)
at Module.load (editor.js:42:20)
at Module.register (filters.js:9:99)
at eval (editor.js:13:59)
at ./scripts/editor.js (editor.js:732:1)
at options.factory (9731c5f8-594e-4c67-a921-87fcac39ec78:731:31)
at __webpack_require__ (9731c5f8-594e-4c67-a921-87fcac39ec78:139:33)
at __webpack_exec__ (editor.js:746:61)
at editor.js:747:139
at webpackJsonpCallback (9731c5f8-594e-4c67-a921-87fcac39ec78:1403:39)
blob:https://site/ccd23bf7-2100-4333-b3f9-4a704bf1e0a8
Not sure yet why