Install can't trace down stylesheets

[zachsa999]

Just found this component library, excited to try it, but its puking out a hundred errors. they are all variants of

[sass] Can't find stylesheet to import.
  ╷
2 │ @use '~attractions/_variables';
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  src/variables.scss 2:1  @use
  src/app.scss 1:1        root stylesheet
[sass] Can't find stylesheet to import.
  ╷
2 │ @use '~attractions/_variables';
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  src/variables.scss 2:1  @use
  src/app.scss 1:1        root stylesheet
Error: Can't find stylesheet to import.
  ╷
2 │ @use '~attractions/_variables';
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  src/variables.scss 2:1  @use
  src/app.scss 1:1        root stylesheet
Error: Can't find stylesheet to import.
  ╷
2 │ @use '~attractions/_variables';
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  src/variables.scss 2:1  @use
  src/app.scss 1:1        root stylesheet
    at Object.wrapException (/home/zachsa999/projects/rmgh-netlifyCMS-svelte/node_modules/sass/sass.dart.js:1247:17)
    at /home/zachsa999/projects/rmgh-netlifyCMS-svelte/node_modules/sass/sass.dart.js:70553:25
    at _wrapJsFunctionForAsync_closure.$protected (/home/zachsa999/projects/rmgh-netlifyCMS-svelte/node_modules/sass/sass.dart.js:3738:15)
    at _wrapJsFunctionForAsync_closure.call$2 (/home/zachsa999/projects/rmgh-netlifyCMS-svelte/node_modules/sass/sass.dart.js:28365:12)
    at _awaitOnObject_closure.call$1 (/home/zachsa999/projects/rmgh-netlifyCMS-svelte/node_modules/sass/sass.dart.js:28353:32)
    at Object._rootRunUnary (/home/zachsa999/projects/rmgh-netlifyCMS-svelte/node_modules/sass/sass.dart.js:4113:18)
    at StaticClosure.<anonymous> (/home/zachsa999/projects/rmgh-netlifyCMS-svelte/node_modules/sass/sass.dart.js:99257:16)
    at _CustomZone.runUnary$2$2 (/home/zachsa999/projects/rmgh-netlifyCMS-svelte/node_modules/sass/sass.dart.js:29762:39)
    at _Future__propagateToListeners_handleValueCallback.call$0 (/home/zachsa999/projects/rmgh-netlifyCMS-svelte/node_modules/sass/sass.dart.js:28834:51)
    at Object._Future__propagateToListeners (/home/zachsa999/projects/rmgh-netlifyCMS-svelte/node_modules/sass/sass.dart.js:3909:93)
[sass] Can't find stylesheet to import.
  ╷
2 │ @use '~attractions/_variables';
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  src/variables.scss 2:1  @use
  src/app.scss 1:1        root stylesheet

I'm going to drop all my config files below. Do you know what is going on here?

app.scss

@use '~attractions/_variables';
@use '~attractions/_mixins';
@use '~attractions/_appearances';

svelte.config.js

import { mdsvex } from 'mdsvex';
import adapter from '@sveltejs/adapter-netlify'
import sveltePreprocess from 'svelte-preprocess'
import makeAttractionsImporter from 'attractions/importer.js'

/** @type {import('@sveltejs/kit').Config} */
const config = {
    extensions: ['.svelte', '.svelte.md', '.md', '.svx'],
    preprocess: [
        sveltePreprocess({
            scss: {
                importer: makeAttractionsImporter(),
                }
            }),     
                mdsvex({
                    //some options
        })
    ],

    kit: {
        adapter: adapter({
        }),

        prerender: {
        }
    },

};

export default config;

package.json

{
    "name": "sveltekit-netlify-cms",
    "version": "0.0.1",
    "scripts": {
        "dev": "vite dev",
        "build": "vite build",
        "package": "svelte-kit package",
        "preview": "vite preview",
        "test": "playwright test",
        "lint": "prettier --check --plugin-search-dir=. . && eslint .",
        "format": "prettier --write --plugin-search-dir=. ."
    },
    "devDependencies": {
        "@playwright/test": "^1.22.2",
        "@sveltejs/adapter-auto": "next",
        "@sveltejs/adapter-static": "^1.0.0-next.39",
        "@sveltejs/kit": "next",
        "attractions": "^3.7.0",
        "autoprefixer": "^10.4.8",
        "eslint": "^8.16.0",
        "eslint-config-prettier": "^8.3.0",
        "eslint-plugin-svelte3": "^4.0.0",
        "mdsvex": "^0.10.6",
        "postcss": "^8.4.16",
        "prettier": "^2.6.2",
        "prettier-plugin-svelte": "^2.7.0",
        "sass": "^1.53.0",
        "svelte": "^3.44.0",
        "svelte-preprocess": "^4.10.7",
        "vite": "^3.0.0"
    },
    "type": "module",
    "dependencies": {
        "mdsvex": "^0.10.6",
        "netlify-cms-app": "^2.15.72"
    }
}

If i change the contents of app.scss to

@use 'node_modules/attractions/_variables';
@use 'node_modules/attractions/_mixins';
@use 'node_modules/attractions/_appearances';

I get <CheckIcon> is not a valid SSR component. You may need to review your build config to ensure that dependencies are compiled, rather than imported as pre-compiled modules

I change sveltePreprocess in svelte.config.js to

sveltePreprocess({
            scss: {
                // prependData: '@use "src/variables.scss" as *;',
                importer: makeAttractionsImporter({
                    themeFile: 'static/theme.scss',
                    nodeModulesPath: 'node_modules'

                }),
            }
        }),

[zachsa999]

This might be my inexperience with sass talking though

[zachsa999]

just set my svelte.config.js to

sveltePreprocess({
            scss: {
                // prependData: '@use "src/variables.scss" as *;',
                importer: makeAttractionsImporter({
                    // themeFile: 'node_modules/attractions/_variables'
                    themeFile: path.join(__dirname, 'static/css/theme.scss'),
                    includePaths: [path.join(__dirname, './static/css')],

                }),
            }
}),

it's loading the custom theme, then the old theme jumps back in. during site loading

[zachsa999]

where __dirname = ''

[zachsa999]

Now it works, I did a lot of fiddling and going through source code. Seemingly I had a syntax error somewhere, and accidentally fixed it by trying every combination of everything.

@illright would you be interested in my pushing an install guide for sveltekit to the docs? They just had a pretty substantial routing change, I imagine they are quite close to version 1.0.0

[aabounegm]

@zachsa999 thanks for your interest in helping with the docs, but there is already an ongoing PR for migrating to SvelteKit (including a task for updating the guides). It has been inactive for a little while now due to me being a little busy with other stuff at the moment, but I'm planning to get back to it soon. Can we consider this issue done or do you still need help with it?

[zachsa999]

It is done, every so often the only thing I need to do if I have an issue is to tell the world.

Thanks for the great component library.