search

dynamicweb / swiffy-slider

Super fast carousel and slider with touch for optimized websites running in modern browsers.
MIT License
247 stars 30 forks source link

Standard Sass and CSS import doesn't seem to be working? #29

Closed thiagomajesk closed 2 years ago

thiagomajesk commented 2 years ago

Hi, I couldn't find documentation on how to import the CSS files outside of JS. I see there's another similar issue over here: https://github.com/dynamicweb/swiffy-slider/issues/24 (I'm currently using version 1.5.1, which should have fixed that).

Currently, doing @import "swiffy-slider"; or @import swiffy-slider/dist/css/swiffy-slider; causes a whole lot of problems with Vite.js (which uses esbuild under the hood). For instance:

Error: Missing "./dist/css/swiffy-slider" export in "swiffy-slider" package
Error: Failed to resolve entry for package "swiffy-slider". 
The package may have incorrect main/module/exports specified in its package.json: 
Failed to resolve entry for package "swiffy-slider"

PS.: This might not have anything to do with it, but after looking at other packages, I notice that style and exports don't usually start with ./.

nicped commented 2 years ago

I can use import css from "swiffy-slider/src/swiffy-slider.css" using webpack. Will update the docs.

But I will also need to look into the difference between having the css extension on the import and not. The project does not have a scss file - and it the conversion to pure esmodule seems like causing me some issues with this.

thiagomajesk commented 2 years ago

Hi @nicped! Perhaps I didn't make my point clear... I'm not using CSS in JS, so import css from "swiffy-slider/src/swiffy-slider.css", doesn't actually help. I'm talking about actual CSS and SCSS @import (from an .[s]css file).

nicped commented 2 years ago

Ok, thank you for clarifying - the package did not have any exports for versions where you omit the .CSS extension

See linked pull #30 - it contains an export for "swiffy-slider/cms" that you should be able to use. I also updated the default style and browser fields to not use the . and to use the dist files instead.

You can check out the new package config - and cut and paste it to you local install to test if this should fix the issue.

thiagomajesk commented 2 years ago

Hi, again @nicped. I can confirm that both @import "swiffy-slider/css"; and @import "swiffy-slider/src/swiffy-slider.css"; compiles correctly now. One question though: Wouldn't @import "swiffy-slider" make more sense, since this is also the name of the JS package? (I don't know if it's possible or it clobbers the . export)