Import Components from "src" does not work

[SuPuL]

Hi,
i've integrated svelte-materialify into my test app using the complete import with from svelte-materialify. It's working without a problem.

After that i tried to import the src directly following the instructions in the documentation. Import from svelte-materialify/src leads to this error:

So i seems that the scss is not loaded correctly. I also tried to import all uses components with their specific index files like

  import MaterialApp from 'svelte-materialify/src/components/MaterialApp/index.js';
  import AppBar from 'svelte-materialify/src/components/AppBar/index.js';
  import Button from 'svelte-materialify/src/components/Button/index.js';
  import Icon from 'svelte-materialify/src/components/Icon/index.js';
  import NavigationDrawer from 'svelte-materialify/src/components/NavigationDrawer/index.js';
  import List from 'svelte-materialify/src/components/ProgressLinear/index.js';
  import ListItem from 'svelte-materialify/src/components/ProgressLinear/index.js';
  import Overlay from 'svelte-materialify/src/components/Overlay/index.js';
  import ProgressLinear from 'svelte-materialify/src/components/ProgressLinear/index.js';

Using this the app compiles but without the styles defined globally and in each component. I've included an own styles path and the node_modules folder in my preprocessing.

Do i miss something? Or do you need more information?

Greetz and good luck with your exams!

[TheComputerM]

https://svelte-materialify.vercel.app/getting-started/installation/#advanced-install

$ npm i -D svelte-materialify svelte-preprocess sass postcss

and then in preprocess inside svelte

preprocess: sveltePreprocess({
    scss: {
      includePaths: ['theme'],
    },
  }),

[betaboon]

doesn't work for me either. even with the documented steps.
the errors I'm getting suggest that the scss within node_modules isn't be preprocessed.

[snowpack] FAILURE: Unexpected input (13:13)
11:   .s-container {
12:     width: 100%;
13:     padding: $container-padding-x;
                 ^
14:     margin-right: auto;
15:     margin-left: auto;
[snowpack] Failed to load node_modules/.pnpm/svelte-materialify@0.3.4_svelte@3.32.1/node_modules/svelte-materialify/src/components/Grid/Container.svelte

[TheComputerM]

What are you using snowpack, rollup? show me the config file.

[betaboon]

I'm using snowpack.

snowpack.config.json:

/** @type {import("snowpack").SnowpackUserConfig } */
module.exports = {
  mount: {
    public: { url: '/', static: true },
    src: { url: '/dist' },
  },
  plugins: ['@snowpack/plugin-svelte', '@snowpack/plugin-typescript'],
  routes: [
  ],
  optimize: {
    bundle: true,
    minify: true,
    treeshake: true,
    splitting: true,
  },
  packageOptions: {
  },
  devOptions: {
    open: 'none', // don't open browser
    output: 'stream', // don't clear the output
    out: 'dist', // build to dist-directory
    port: 3000,
  },
  buildOptions: {
  },
};

svelte.config.js:

const sveltePreprocess = require('svelte-preprocess');

module.exports = {
  preprocess: sveltePreprocess({
    scss: {
      includePaths: ['theme''],
    },
  }),
};

[TheComputerM]

Don't know what is wrong with your config, did you install sass?

[betaboon]

yep sass is installed and i checked that scss in my own components work.

these are all the packages i got installed:

devDependencies:
@mdi/js 5.9.55                     prettier 2.2.1                     svelte-check 1.1.32
@snowpack/plugin-svelte 3.5.2      prettier-plugin-svelte 2.1.1       svelte-match-media 1.2.0
@snowpack/plugin-typescript 1.2.1  sass 1.32.6                        svelte-materialify 0.3.4
@tsconfig/svelte 1.0.10            snowpack 3.0.11                    svelte-preprocess 4.6.5
@types/snowpack-env 2.3.3          svelte 3.32.1                      typescript 4.1.3

[Florian-Schoenherr]

@SuPuL Did the advanced install work on your end?

[SuPuL]

@Florian-Schoenherr @TheComputerM Hey guys,
i really do not know why but my deps were not correct. Sass was missing. I used yarn to install the packages. I built a whole new project and everything went well. I'am not sure if i was too tired. I tried it almost half a day.

Sorry for bothering and thx for your great work.

[Florian-Schoenherr]

No worries. Now we know there're problems with snowpack.

[fabien]

@SuPuL I'm having exactly the same issue when using Snowpack and the workaround of importing individual .svelte components from src - none of the styles are applied. In fact, no styles are being processed at all (no errors either). They are simply skipped. My preprocess setup has includePaths: ['node_modules', 'theme'] setup, but still nothing ...

Any ideas?

[betaboon]

@fabien see #132

[fabien]

Turns out, the issues with Snowpack are twofold, firstly, the so-called barrel imports (and index.js with exports ... from ...) don't work properly, which appears to be resolved using a custom packageOptions setup (see below). It can also be resolved using direct imports of said .svelte files. This is the main discussion around that:

FredKSchott/snowpack#1808

Looking into the issue of the css being skipped altogether, I find that Snowpack has issues using the scss preprocessor on .svelte files inside node_modules (which are treated differently from those inside your project - they are compiled on snowpack startup only).

Comparing different component packaging options, it turns out that svelte-materialify relies on the Svelte preprocessor, whereas svelte-material-ui imports the stylesheet in an index.js alongside the .svelte file(s):

https://github.com/TheComputerM/svelte-materialify/tree/master/packages/svelte-materialify/src/components/Button

https://github.com/hperrin/svelte-material-ui/tree/master/packages/button

Taking this repo https://github.com/LeanderG/svelte-smui - it works using the snowpack provided packageOptions (previously installOptions even on v.3 without any issues. Sadly the same setup doesn't work for svelte-materialify:

/** @type {import("snowpack").SnowpackUserConfig } */

const { preprocess } = require('./snowpack.config'); // also sets up scss preprocessing ...

module.exports = {
  mount: {
    public: {url: '/', static: true},
    src: {url: '/dist'},
  },
  plugins: [
    '@snowpack/plugin-svelte',
    '@snowpack/plugin-dotenv',
  ],
  routes: [
    /* Example: Enable an SPA Fallback in development: */
    // {"match": "routes", "src": ".*", "dest": "/index.html"},
  ],
  optimize: {
    /* Example: Bundle your final build: */
    // "bundle": true,
  },
  packageOptions: {
    rollup: {
      plugins: [
        require('rollup-plugin-svelte')({
          preprocess,
          include: ['./node_modules'],
        }),
        require('rollup-plugin-postcss')({
          use: [
            [
              'sass',
              {
                includePaths: ['./theme', './node_modules'],
              },
            ],
          ],
        }),
      ],
    },
  },
  devOptions: {
    /* ... */
  },
  buildOptions: {
    /* ... */
  },
};

[betaboon]

@fabien first off: thank you for the research.

can we keep the snowpack related discussion in #132 please? :)