Closed vwong closed 1 year ago
"@marko/tags-api-preview": "^0.7.2", "@marko/vite": "^4.1.0", "marko": "^5.31.18", "vite": "^4.5.0",
I want to use a preprocessor (scss) but preprocessor options are not being applied with Vite, when using the style tags.
I've configured vite with:
{ css: { preprocessorOptions: { scss: { additionalData: `@use "sass:math";`, } } } }
This should inject the additional string / variables to the SCSS.
First variant with external style sheet my-component.marko: no styles my-component.style.scss:
my-component.marko
my-component.style.scss
.foo { top: math.abs(-10px); }
Produces correctly generated CSS with top: 10px.
top: 10px
Second variant with a style block (Marko 5 syntax) in a single file component: my-component.marko:
style.scss { .foo { top: math.abs(-10px); } }
Also produces correctly generated CSS with top: 10px.
Third variant, with a style tag (Marko 6 Tags syntax) in a single file component: my-component.marko:
<!-- use tags --> <style.scss> .foo { top: math.abs(-10px); } </style>
Produces incorrect CSS with top: math.abs(-10px). It seems the Vite preprocessor options are not being applied.
top: math.abs(-10px)
I'm not sure which repo this belongs to, but seeming that this applies with the Tags API, I thought I'd raise it here.
Weird... I'm unable to reproduce this anymore. Must be some caching issue.
Version: 0.7.2
Details
I want to use a preprocessor (scss) but preprocessor options are not being applied with Vite, when using the style tags.
Expected Behavior
I've configured vite with:
This should inject the additional string / variables to the SCSS.
Actual Behavior
First variant with external style sheet
my-component.marko
: no stylesmy-component.style.scss
:Produces correctly generated CSS with
top: 10px
.Second variant with a style block (Marko 5 syntax) in a single file component:
my-component.marko
:Also produces correctly generated CSS with
top: 10px
.Third variant, with a style tag (Marko 6 Tags syntax) in a single file component:
my-component.marko
:Produces incorrect CSS with
top: math.abs(-10px)
. It seems the Vite preprocessor options are not being applied.I'm not sure which repo this belongs to, but seeming that this applies with the Tags API, I thought I'd raise it here.