Importing SCSS files from node_modules

[YogliB]

How do I do that correctly?

I tried:

<style lang="scss">
  @import '@material/button/mdc-button.scss';
</style>

But not all mixins are being imported from inside the file...

[kaisermann]

Your @import is correct. The scss processor includes the file's directory and your node_modules as include paths.

What kind of problem are you having? Can you make a reproduction of it? I've just tried this:

<style type="text/scss">
  @import '@material/button/mdc-button';

  .mdc-button {
    @include mdc-button-filled-accessible(green);
  }
</style>

And the mixins seems to be working

[YogliB]

I'm trying to enable the ripple effect, and it's not working when I import the Sass files this way.

Here's my entire component code:

<script>
  import { onMount, onDestroy } from 'svelte';
  import { MDCRipple } from '@material/ripple';
  import MatIcon from './MatIcon.svelte';

  let disabled = null;
  export { disabled };
  export let flat = null;
  export let raised = null;
  export let outlined = null;
  export let dense = null;
  export let icon = null;
  export let trailing = null;

  let buttonRipple = null;

  onMount(() => {
    buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));
  });

  onDestroy(() => {
    if (buttonRipple) {
      buttonRipple.destroy();
    }
  });
</script>

<style type="text/scss">
  @import '@material/button/mdc-button';
</style>

<button
  class="mdc-button"
  class:mdc-button--raised={raised && !flat && !outlined}
  class:mdc-button--unelevated={flat && !raised && !outlined}
  class:mdc-button--outlined={outlined && !flat && !raised}
  class:mdc-button--dense={dense}
  on:click
  on:dblclick
  disabled={disabled && disabled !== 'false'}>
  {#if icon && !trailing}
    <MatIcon button> {icon} </MatIcon>
  {/if}
  <span class="mdc-button__label">
    <slot />
  </span>
  {#if icon && trailing}
    <MatIcon button> {icon} </MatIcon>
  {/if}
</button>

The event listener adds CSS classes to the button on click, but they're not recognized by the browser...

[kaisermann]

Ooooh, I see what's happening. Svelte removes unused classes from your template, so all those ripple classes are being removed at build time.

A suggestion I can make to you is to add a global attribute to your <style type="..."> tag: ``<style type="..." global>`. Unfortunately, if you add any other css to the tag, it will be globally scoped.

obs: To use the global attribute you need to have postcss installed as a dependency

[YogliB]

@kaisermann I've managed to solve the problem by configuring the sass compiler:

preprocess: autoPreprocess({
    scss: { includePaths: ['src', 'node_modules'] },
}),

Any idea what's happening?

[quantuminformation]

I'm also trying to use material via scss but get this error: Cannot find module './transformers/text/scss.js'

<style lang="text/scss" global>
	@import "@material/top-app-bar/mdc-top-app-bar";
	@import "@material/icon-button/mdc-icon-button";
</style>

<style>
	h1, figure, p {
		text-align: center;
		margin: 0 auto;
	}

source here
https://github.com/QuantumInformation/material-svelte-blueprint/blob/master/webpack.config.js
https://github.com/QuantumInformation/material-svelte-blueprint/blob/master/src/routes/index.svelte#L2

✔ service worker (27ms)

src/routes/index.svelte changed. rebuilding...
✗ server
src/routes/index.svelte
Module build failed (from ./node_modules/svelte-loader/index.js):
Error: [svelte-preprocess] Error transforming 'text/scss'. Message:
Cannot find module './transformers/text/scss.js'
Require stack:
- /Users/nikos/WebstormProjects/material-svelte-blueprint/node_modules/svelte-preprocess/src/utils.js
- /Users/nikos/WebstormProjects/material-svelte-blueprint/node_modules/svelte-preprocess/src/autoProcess.js
- /Users/nikos/WebstormProjects/material-svelte-blueprint/node_modules/svelte-preprocess/src/index.js
- /Users/nikos/WebstormProjects/material-svelte-blueprint/webpack.config.js
- /Users/nikos/WebstormProjects/material-svelte-blueprint/node_modules/sapper/dist/core.js
- /Users/nikos/WebstormProjects/material-svelte-blueprint/node_modules/sapper/dist/dev.js
- /Users/nikos/WebstormProjects/material-svelte-blueprint/node_modules/sapper/dist/cli.js
- /Users/nikos/WebstormProjects/material-svelte-blueprint/node_modules/sapper/sapper
Stack:

[kaisermann]

@quantuminformation the culprit is your lang attribute. You can set it type="text/scss" or lang="scss", but not lang="text/scss". svelte-prepreprocess is trying to find a transformer for a language literally called text/scss 😁

[LucianVoju]

@kaisermann please can you share a working rollup config for sapper with working material.ui imports. I have const preprocess = sveltePreprocess({ scss: { includePaths: ["src", "node_modules"] }, postcss: { plugins: [ require("autoprefixer")({ browsers: "last 2 versions" }) ] } }); and not managing to import material components. When using <style lang="scss"> @import "@material/button/mdc-button.scss"; </style>
getting Invalid CSS after "@include mixins": expected 1 selector or at-rule, was ".core-styles;"
Thanks

[YogliB]

@LucianVoju Here's a working example:
https://github.com/YogliB/svelte-external-scss-example

[LucianVoju]

@YogliB thank you

[LucianVoju]

Have you managed to have the ripple effect?

[sidharthramesh]

@LucianVoju Here's a working example:
https://github.com/YogliB/svelte-external-scss-example

Link is broken

[YogliB]

@sidharthramesh
How are your trying to do that? (sapper/snowpack etc.)

[betaboon]

@LucianVoju Here's a working example:
https://github.com/YogliB/svelte-external-scss-example

Link is broken

@YogliB seems like your repo is gone

[YogliB]

@betaboon

Try this.

[rowthan]

Ooooh, I see what's happening. Svelte removes unused classes from your template, so all those ripple classes are being removed at build time.

A suggestion I can make to you is to add a global attribute to your <style type="..."> tag: ``<style type="..." global>`. Unfortunately, if you add any other css to the tag, it will be globally scoped.

obs: To use the global attribute you need to have postcss installed as a dependency

still not work for customElement.