Microbundle: (crl fork) where is the css output for sass?

Created on 4 Sep 2020 · 6Comments · Source: developit/microbundle

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?

CRL question upstream

Source

Mazuh

Most helpful comment

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

Mazuh on 12 Nov 2020

❤1 👍1

All 6 comments

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>

developit on 5 Sep 2020

@developit Thanks for answering me. Really. :smiley:

(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.

Mazuh on 5 Sep 2020

No problem - tbh you're in the right place. microbundle-crl is a fork, but we're working to merge it back into Microbundle:
https://github.com/transitive-bullshit/create-react-library/issues/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.

developit on 8 Sep 2020

👍1

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 https://github.com/developit/microbundle/issues/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

mlippert on 8 Oct 2020

@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).

developit on 10 Oct 2020

❤1

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

Mazuh on 12 Nov 2020

❤1 👍1

Was this page helpful?

0 / 5 - 0 ratings