-
Notifications
You must be signed in to change notification settings - Fork 36
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
SvelteKit Support? #258
Comments
To be honest, we are keeping tabs on SvelteKit and eagerly waiting for its stable release, but we haven't done any work on trying to adapt Attractions, seeing as we don't currently see practical benefit in SvelteKit (and also because we are like scared kittens who don't know where to turn for advice on things like backwards-compatibility). However, I don't think there's that much work to be done for Attractions to support SvelteKit. I encourage you to try just running it as it is, and you may use this issue to report your findings and troubles and we will do our best to assist! |
I had a go. It kinda works... The standard installation instructions work. What doesn't work is themeing. I have installed SCSS/SASS with Sveltkit and it works. However when I try the overrides shown in the Attractions docs, it breaks the build with the following error:
[Side note: why in the world would you default to such a huge button-radius!?] I presume this has something to do with the svelte.config.js not being right. I note that the installation instructions show the I don't know if that's the problem or what but it doesn't like this: |
Once I added the
Then I get this error:
|
Then I discovered that I'd put the One problem is that I can't seem to figure out how to adjust other theme. variables. I tried adding
but I get this error:
|
And then I discovered that I can't spell TLDR; So yeah, if you aren't absolutely useless at following instructions like me, it works :D |
Good job :D I just read through the current SvelteKit docs page and I think that we can get everything to work just by altering the behaviour of the |
Congratulations for being the first working UI library for Sveltekit. |
I also tried using it in svelte-kit, and also everything worked until I got to themeing, because of the ESM import thing... import preprocess from 'svelte-preprocess';
import makeAttractionsImporter from "attractions/importer.js";
import path from "path";
const __dirname = path.resolve();
/** @type {import('@sveltejs/kit').Config} */
const config = {
// Consult https://github.com/sveltejs/svelte-preprocess
// for more information about preprocessors
preprocess: preprocess({
scss: {
importer: makeAttractionsImporter({
// specify the path to your theme file, relative to this file
themeFile: path.join(__dirname, 'static/css/theme.scss'),
}),
// not mandatory but nice to have for concise imports
includePaths: [path.join(__dirname, './static/css')],
},
}),
kit: {
// hydrate the <div id="svelte"> element in src/app.html
target: '#svelte'
}
}; I realize that that was probably a noob problem to have, but if another noob finds this, happy themeing. |
The code above worked great with the other instructions. (Maybe, I'm the noob here.) But you may add this to the instruction page for the noob like me. It's gonna really helpful! |
n00b here... but using 'pnpm`, this could be relevant i tried the snippet #258 (comment) above, and Undefined variable.
╷
4 │ border-radius: vars.$chip-radius;
│ ^^^^^^^^^^^^^^^^^
╵
node_modules/.pnpm/attractions@3.3.0_17592ffe0e35a56eeee14de95fefae03/node_modules/attractions/chip/chip.svelte 4:18 root stylesheet
2 | import classes from '../utils/classes.js';
3 |
4 | let _class = null;
| ^
5 | export { _class as class };
6 | /**
Error: Undefined variable.
╷
4 │ border-radius: vars.$chip-radius;
│ ^^^^^^^^^^^^^^^^^
╵
node_modules/.pnpm/attractions@3.3.0_17592ffe0e35a56eeee14de95fefae03/node_modules/attractions/chip/chip.svelte 4:18 root stylesheet What does it try to tell me....? |
The |
Just a question really -- now that SvelteKit is getting more mature and (hopefully soon) ready for 1.0. I was wondering if there is any work being done on making this package compatible with it and the Vite thing it uses -- etc. etc. :) I want to use this package in a new SvelteKit project I am creating and just wondering how much PITA I am going to have .. any ideas? :)
The text was updated successfully, but these errors were encountered: