steveblue commented 4 years ago

It seems the plugin is incompatible with css preprocessors to a degree. I am able to import scss in files just fine.

import style from './button.scss';

resolves to a string as in intended.

However, just adding this plugin has now broken global styling.

STEPS TO REPRODUCE:

yarn add parcel-plugin-css-to-string

index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title Parcel Starter</title>
    <link rel="stylesheet" type="text/css" href="style/style.scss">
  </head>
  <body>
    <h1>Hello World</h1>
  </body>
</html>

style.scss

body {
    font-family: sans-serif;
    font-size: 16px;
}

Styling included with link tag fails to compile with parcel and parcel build. Otherwise, plugin works as prescribed.

shoonia commented 4 years ago

Hey @steveblue!

I don't pay attention to Sass yet. It's a good question, I try to fix it in the near future.

Thanks!

shoonia commented 4 years ago

4 Enable generate of CSS files

RTK commented 4 years ago

Unfortunately the issue still exists. The plugin generates a .js file instead of a css when used from .html files:

<link rel="stylesheet" media="screen" href="/main.47d027ea.js" type="text/css">

shoonia commented 3 years ago

My solution is not beautiful but it works. It's using a custom extension for CSS files that will be imported to JS.

For example: *.cssx

.parcelrc

{
  "parcel-plugin-css-to-string": {
    "assetType": ["cssx"]
  }
}

Unfortunately I can't found how to fix this issue quickly. If you know how to fix it, please share an example, docs, article, etc... Thanks!

shoonia / parcel-plugin-css-to-string

Adding plugin breaks scss compilation for index.html #3

4 Enable generate of CSS files