Issues in setting up with Rollup

Hi. I am trying to setup MWC with rollup but am facing quite a few issues. Can you help?

I have setup rollup to use https://github.com/Anidetrix/rollup-plugin-styles for compiling sass with dart-css loader and the config section looks like this:

styles({
        modules: true,
        mode: "emit",
        sass: {
          impl: 'sass',
          fiber: require('fibers'),
          includePaths: [
            'node_modules'
          ]
        }
      }),
      litcss(),

And my main scsss file looks like this:

@use "@material/drawer";
@use "@material/list";

@include drawer.core-styles;
@include drawer.dismissible-core-styles;
@include drawer.modal-core-styles;
@include list.core-styles;

Case 1:

Import just using @use "@material/drawer";

I get this:

I also tried to prefix with a ~ and it had same issues.

Case 2:

I added the suffix _index.css to make the scss file like this:

@use "~@material/drawer/_index.scss";
@use "~@material/list/_index.scss";

@include drawer.core-styles;
@include drawer.dismissible-core-styles;
@include drawer.modal-core-styles;
@include list.core-styles;

ion-menu-button {
  display: block;
}

(It does not work without the ~) After this, the scss is resolved. But internally the scss refers to other scss files which are being imported like this: @use "@material/theme/variables"; This fails because it does not refer to _variables.scss

Can you please guide me on how this can be fixed? Any reference rollup implementation which I can use? Thanks.

[asyncLiz]

Keep in mind that Material Web Components (MWC) and this library, Material Components for the Web (MDC), are two separate, though related libraries.

MDC uses plain HTML, JS, and CSS to render components. For customization, Sass is required. It’s the original Material + Web!

MWC uses web components to render components. It wraps the plain HTML/JS/CSS from MDC to do so and is the newer cooler kid on the block. MWC does not require Sass for customization. It uses CSS custom properties exclusively to do its theming work instead.

You cannot use MDC Sass to customize MWC components. Generally speaking, you want to pick either MDC or MWC for your application. We don’t recommend mixing and matching the two unless you’re using a component from MDC that hasn’t been added to MWC yet.

I would recommend joining the Polymer Slack and hop into the #material channel if you have more starter questions that our community may help out with.

[tvvignesh]

Sure. Thanks for the clarification. That makes sense. Closing this issue. I am already in Polymer slack, will join the material channel as well 👍