(crl fork) where is the css output for sass? #718

Mazuh · 2020-09-04T19:53:03Z

Question!

I installed sass as suggested, it appears to be working (if I type something wrong in the style file, there's an output for it)... but I don't know how my example can import the created .css bundles.

In the lib, here's a illustrative example of the .scss and .tsx:

.my-button {
  background: red;
}

import React from 'react';
import './MyButton.scss';

export default function MyButton() {
  return <button className="my-button">hello world</button>;
}

Output of yarn start:

yarn run v1.22.4
$ microbundle-crl watch --no-compress --format modern,cjs
Watching source, compiling to dist:
Wrote 1401 B: index.modern.js.gz
       1209 B: index.modern.js.br
Wrote 1677 B: index.js.gz
       1437 B: index.js.br

And in the example:

import React from 'react';
import { MyButton } from 'my-awesome-lib';
// What I'm expecting to do:
// import 'my-awesome-lib/my-compiled-styles.css';

export default function App() {
  return (
    <div>
      <MyButton />
    </div>
  );
}

The example app is just plain HTML, cause I don't know how to import the compiled styles.

Any advices on how to make this work?

The text was updated successfully, but these errors were encountered:

developit · 2020-09-05T14:37:48Z

Hi there! Just a heads up - there's no such thing as a CSS import yet, that's something bundlers invented that hasn't been standardized (it's being worked on, but there's a lot of issues to sort out).

By default, Microbundle will compile your CSS to ./dist/$NAME.css, where $NAME is your library's name defined in the package.json. In your example, it would likely be the following:

import 'my-awesome-lib/dist/my-awesome-lib.css';

If you're running your example in a bundler, you'll need css-loader+style-loader for Webpack or rollup-plugin-css-only for Rollup. Otherwise, if you're running your example using a plain old HTML file, you need to load the CSS using a <link> tag:

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="/node_modules/my-awesome-lib/dist/my-awesome-lib.css">
  </head>
  <body>
    <script src="/node_modules/my-awesome-lib/dist/index.modern.js"></script>
  </body>
</html>

Mazuh · 2020-09-05T20:26:11Z

@developit Thanks for answering me. Really. 😃

(First, I guess I'm starting to question if opening an issue here is indeed the bast place. You see, I came from microbundle-crl on NPM and the issue page was here. But anyway.)

I'm sorry, I guess I'm being dumb, but I can't understand exactly what you're saying. I just bootstrapped a lib with create-react-library and my start script looks like this: microbundle-crl watch --no-compress --format modern,cjs but no CSS is generated (only .js bundle as I pasted in the issue description, which is different than the expected output you commented).

I'm believing now that the original microbundle doesn't have this issue and Sass is outputting CSS by default like the example I said, right? If so, that would be an issue of microbundle-crl fork and not yours, and I'm sorry for not paying attention that clicking in the issue button of NPM was redirecting me to another project. I'd still be glad if you had any suggestion of what I should do to generate my CSS with this fork.

In any case, I'll be closing the issue soon. Thanks again for answering me.

developit · 2020-09-08T14:05:32Z

No problem - tbh you're in the right place. microbundle-crl is a fork, but we're working to merge it back into Microbundle:
transitive-bullshit/create-react-library#284

I just set up a test repo, and I can confirm that the compiled scss is written to disk as dist/index.css (for an "index.js" entry). I guess that means microbundle-crl has changed something to do with sass processing.

FWIW you should be able to do npm rm microbundle-crl && npm i -D microbundle, then replace "microbundle-crl" with "microbundle" in your scripts.

mlippert · 2020-10-08T17:29:39Z

Googling sass/scss and microbundle brought me here, and I haven't found anything else that describes how to use sass with microbundle. @Mazuh implied he found some documentation, but I can't seem to find it.

What is the expected way to use sass with microbundled javascript?
In particular:

what devDependencies need to be installed (sass? rollup-plugin-scss?)
how should they be referenced to get them compiled to css and bundled? (import './style.scss';?)
is there configuration (I'm guessing not considering the focus of microbundle) or command line options?

I'm actually trying to have some local sass and @use scss files from installed packages,
ie @import "bulma/bulma.sass"
or @use 'node_modules/@meco/metrics/sass/dashboard'; referencing node_modules/@meco/metrics/sass/_dashboard.scss'

I'd really like to do this right, from the start rather than trying to kludge something together, so any pointers would be appreciated. Maybe eventually a section in the readme doc if this isn't out of scope for microbundle?

Edit: I'm starting to figure some of this out.

the sass package has to be installed as a dev dependency
using import './style.scss'; will notify microbundler to compile the file to css and put the result in the index.css
I have run into the All CSS-files are treated as CSS Modules #653 bug where it considers style.scss a css module. It looks like I can use :global { @import ... } workaround. You have to use the @import not the @use directive in the :global block. And it seems that node_modules is not in the sass load path so to reference an installed package's sass requires node_modules/ prefix.
no additional configuration is needed

Any of the above may be wrong, but so far it is what seems to be working

developit · 2020-10-09T22:21:17Z

@mlippert your layout sounds correct, and we will hopefully have a fix for the CSS Modules thing soon (though you'll have to wait for it to be backported to microbundle-crl).

Mazuh · 2020-11-12T00:43:22Z

I tried again and sass is now working fine. Maybe something went wrong with the version I was using. Closing the issue here.

nhutkhatran · 2021-12-31T07:04:02Z

@Mazuh can you tell me your sass version! thanks!

guptaashwanee · 2023-03-07T12:26:40Z

But I found few issues with microbundle-crl with missing images as "background-image:url(fullscreen.png);" there are no folders for static assets.

developit added the question ❔ label Sep 5, 2020

developit changed the title ~~where is the css output for sass?~~ (crl fork) where is the css output for sass? Sep 8, 2020

developit added CRL upstream labels Sep 8, 2020

Mazuh closed this as completed Nov 12, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

(crl fork) where is the css output for sass? #718

(crl fork) where is the css output for sass? #718

Mazuh commented Sep 4, 2020 •

edited

Loading

developit commented Sep 5, 2020

Mazuh commented Sep 5, 2020 •

edited

Loading

developit commented Sep 8, 2020

mlippert commented Oct 8, 2020 •

edited

Loading

developit commented Oct 9, 2020

Mazuh commented Nov 12, 2020 •

edited

Loading

nhutkhatran commented Dec 31, 2021

guptaashwanee commented Mar 7, 2023

(crl fork) where is the css output for sass? #718

(crl fork) where is the css output for sass? #718

Comments

Mazuh commented Sep 4, 2020 • edited Loading

developit commented Sep 5, 2020

Mazuh commented Sep 5, 2020 • edited Loading

developit commented Sep 8, 2020

mlippert commented Oct 8, 2020 • edited Loading

developit commented Oct 9, 2020

Mazuh commented Nov 12, 2020 • edited Loading

nhutkhatran commented Dec 31, 2021

guptaashwanee commented Mar 7, 2023

Mazuh commented Sep 4, 2020 •

edited

Loading

Mazuh commented Sep 5, 2020 •

edited

Loading

mlippert commented Oct 8, 2020 •

edited

Loading

Mazuh commented Nov 12, 2020 •

edited

Loading