Comments (11)
I also tried using it in svelte-kit, and also everything worked until I got to themeing, because of the ESM import thing...
In the end I got it to work by setting importing path and __dirname
in my svelte.config.js like this:
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.
from attractions.
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!
from attractions.
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!
from attractions.
Hi n00b, I'm Dad
The theme.scss
file should not be empty — it should use or forward the SCSS file of Attractions. For an example of what could be valid contents of your theme.scss
file, see the third comment by geoidesic in this thread or refer to the Overriding Sass variables section of the docs on theming.
from attractions.
I had a go. It kinda works...
The standard installation instructions work.
You can then import attractions components and use them.
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:
12:28:12 AM [vite] hmr update /src/routes/examples/attractions.svelte
Can't find stylesheet to import.
╷
2 │ @forward '~attractions/_variables' with ($button-radius: 4px)
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
src/routes/examples/attractions.svelte 2:1 root stylesheet
Error: Can't find stylesheet to import.
╷
2 │ @forward '~attractions/_variables' with ($button-radius: 4px)
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
src/routes/examples/attractions.svelte 2:1 root stylesheet
at Object._newRenderError (/Users/repo/GitHub/myApp/node_modules/sass/sass.dart.js:13190:19)
[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 require
syntax, which Sveltekit doesn't support afaik. So I had to change it to this:
import makeAttractionsImporter from 'attractions/importer.js';
instead of
const makeAttractionsImporter = require('attractions/importer.js');
I don't know if that's the problem or what but it doesn't like this: @forward '~attractions/_variables' with ($button-radius: 4px)
, although it seems happy with @use '~attractions/_variables' with ($button-radius: 4px)
.. but then I can't override that horrible button-radius.
from attractions.
Once I added the static/css/theme.scss
and put the full config in like this:
import preprocess from 'svelte-preprocess';
import makeAttractionsImporter from 'attractions/importer.js';
import path from 'path';
/** @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.resolve('./static/css/theme.scss')
}),
// not mandatory but nice to have for concise imports
includePaths: [path.resolve('./static/css')]
}
};
export default config;
Then I get this error:
Can't find stylesheet to import.
╷
1 │ @use 'node_modules/attractions/_variables' as vars;
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
node_modules/attractions/dropdown/dropdown.svelte 1:1 root stylesheet
Error: Can't find stylesheet to import.
from attractions.
Then I discovered that I'd put the static/css
folder in the wrong place. Moved that and now it seems to be mostly working.
One problem is that I can't seem to figure out how to adjust other theme. variables. I tried adding $border-radius
like so:
@forward '~attractions/_variables' with (
$main: green,
$font: "'Open Sans', sans-serif",
$border-radius: 4px,
);
$something-else: red;
but I get this error:
This variable was not declared with !default in the @used module.
╷
4 │ $border-radius: 4px
│ ^^^^^^^^^^^^^^^^^^^
╵
static/css/theme.scss 4:3 @use
src/routes/examples/attractions.svelte 2:1 root stylesheet
from attractions.
And then I discovered that I can't spell $button-radius
! Which is why it wasn't working.
TLDR; So yeah, if you aren't absolutely useless at following instructions like me, it works :D
from attractions.
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 noPrefetch
prop of Buttons.
from attractions.
Congratulations for being the first working UI library for Sveltekit.
from attractions.
n00b here...
but using 'pnpm`, this could be relevant
i tried the snippet #258 (comment) above, and
created an empty static/css/theme.scss
file, which got e past the first error
but then and got this 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
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....?
from attractions.
Related Issues (20)
- Font is missing HOT 7
- How to use custom fonts for e.g. FormFields? HOT 4
- Add Advanced Documentation for the AccordionSection Element HOT 2
- SvelteKit support HOT 4
- :global() isn't processed in SvelteKit, some styles aren't applied HOT 7
- Up and running HOT 3
- chip-group.scss has an invalid selector :global HOT 3
- Custom table header / table items content? HOT 3
- kebab case for custom elements HOT 5
- Install can't trace down stylesheets HOT 6
- Is illright.me down? (Attractions main documentation source) HOT 2
- CSS media breakpoints support? HOT 1
- svelte-preprocess 5 is available HOT 3
- There are links to broken doc site pages HOT 1
- Input value disappears on drag&drop HOT 8
- Vite HOT 6
- Docs HOT 1
- DatePicker shows different month than the selected on specific dates HOT 3
- Button Ripple performance HOT 1
- Slider produces errors on mobile devices HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from attractions.