I'm playing around with MDC on compose-web using <...

# compose-web

[rocketraman]

I'm playing around with MDC on compose-web using @Big Chungus’s project ⬆️ and am experimenting with sass integration, as it seems certain things with MDC are only possible with sass mixins. I've got it working but gradle build doesn't actually pick up any changes to the sass files -- only a clean + build works. Any ideas?

[Big Chungus]

hmm, where are you storing your sass files?

[Big Chungus]

Also, what couldn't you do with just css variables?

[rocketraman]

I've integrated it via sass-loader defined in webpack.config.d -- the sources files are in frontendMain/resources/css/.

[Big Chungus]

Try this to see if it helps https://github.com/rjaros/kvision-examples/blob/master/addressbook-fullstack-ktor/webpack.config.d/webpack.js#L1

[rocketraman]

As I understand it the components are meant to operate with sass mixins e.g. https://material.io/components/text-fields/web#api. There are a limited set of things that can be done with css directly.

[Big Chungus]

resources handling used to be quite flakey in the past. It has improved now, but looks like you have same old issue

[Big Chungus]

Have a look at this https://github.com/material-components/material-components-web/blob/master/docs/theming.md#step-4-changing-the-theme-with-css-custom-properties

[Big Chungus]

I was under the impression that MDC was designed to work with CDN importing

[rocketraman]

The kvision webpack config above didn't work, at least without changes. My paths might be different, not sure. However as per the second link I see it should be able to override any of the sass stuff via CSS, which is promising.

[rocketraman]

Ah, still need to use sass for custom theming: https://github.com/material-components/material-components-web/blob/master/docs/theming.md#custom-themes

[Big Chungus]

For kvision webpack config your paths will definitelly be different.

[Big Chungus]

You basically need just this line with correct path config.resolve.modules.push("../../processedResources/frontend/main");

[rocketraman]

I'm not sure... I have that directory and it contains my css/*.scss files. Its just that the loader is not executing on the scss files there:

Module build failed (from ../../node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
  ╷
1 │ ┌ @use "@material/theme" with (
2 │ │   $primary: #5bb019,
3 │ │   $secondary: #215221,
4 │ │   $background: #fff,
5 │ │   $on-primary: #2053d5,
6 │ │   $on-secondary: #a2bbec,
7 │ │ );
  │ └─^
  ╵
  ../../../processedResources/frontend/main/css/custom-theme.scss 1:1     @use
  ../../../processedResources/frontend/main/css/textfield-theme.scss 1:1  root stylesheet

[Big Chungus]

you did not change your path

[rocketraman]

It is relative to build/js/packages/projectname/webpack.config.js right?

[Big Chungus]

yes

[Big Chungus]

note frontend/main

[Big Chungus]

Is your sourceSet named frontend?

[rocketraman]

Yes it is

[Big Chungus]

AH, OK

[Big Chungus]

Then I have no more ideas

[Big Chungus]

Hold on, did you actually add @material/theme as your npm dependency? kmdc doesn't wrap that yet

[rocketraman]

Hmm, no I didn't. Just tried it and the kvision workaround still doesn't work. Let me try it without that.

[rocketraman]

Nope.

[rocketraman]

Well, I solved the error above by doing:

config.resolve.modules.push("../../node_modules", "../../../processedResources/frontend/main");

but it still doesn't pull in the changes.

[Big Chungus]

Is processResources task skipped during reload?

[Big Chungus]

Another workaround, point modules directly to your resources folder (src/frontendMain/resources)

[rocketraman]

That was my theory but the file in processedResources is being updated

[rocketraman]

Ah hang on I have a dup of the file that is not being updated in build/js/node_modules/css -- likely this is taking precedence over the one in processResources.

[rocketraman]

It works!

[rocketraman]

Without config.resolve.modules.push

[rocketraman]

My problem was some cruft from an earlier experiment:

implementation(npm(projectDir.resolve("src/frontendMain/resources/css")))