Closed patrick-steele-idem closed 7 years ago
Should the example/test have <div class="foo">...
?
I'm trying to use a style { }
block with plain CSS (or SCSS) but if I switch from <style>
to style {}
in a single .marko
file, the styles stop working. Should they be equivalent?
@codebrainz the <style>
tag is just passed through as a regular html element.
The style {}
block is actually extracted from the component so that it can be placed in a stylesheet. This requires a bundler to build the Marko files and stylesheets for the browser (eg Webpack or Lasso).
@DylanPiercey thanks for the quick response. I'm using Webpack to bundle up the site, is it just the marko-loader
that extracts the style {}
blocks or do I need an additional loader to do it?
@codebrainz Marko basically just hands off the content of the style block as a .css
file to webpack (unless you are using style.less {}
which gets passed through as the extension on the style block).
To work properly you’ll need to include the style-loader
or similar setup to properly handle the css content.
I have sass-loader
, postcss-loader
, css-loader
, and MiniCssExtractPlugin.loader
in my webpack.config.js
. Anyway, it's probably something stupid on my end if it's working for everyone else. Thanks for the help, and sorry to spam this closed issue.
@codebrainz if you want you can throw up your webpack config in the Marko Gitter and I can take a look 🙂.
We no longer want to hijack the standard HTML
<style>
tag to avoid confusion and future problems. Instead, we will use the following:Or, with a specific CSS preprocessor language: