Comments (12)
I was about to look at at soon
from bulvar.
@dpschen you can install beta now 🎉🎉🎉
Install @bulvar/[email protected]
Need to document migration from @import
to @use
still
from bulvar.
By "buildable" I mean it builds without the errors 😄
Judging by compiled CSS diffs have reasonable changes (like division precision and few move-around that shouldn't affect styles)
There was some import error loop, so I merges shared and native bulma utilities (I guess that's for better).
I think it'd be great to separate variables namespace and function / mixins namespace, but let's see
from bulvar.
Done. Tested in my project and it seems to work.
Yeah that hit me few day ago, I just have to stop this over-optimization 🙄
To avoid additional setup and simplify the process I left relative paths everywhere.
from bulvar.
Will try, thanks! =)
from bulvar.
Sorry for the delay. So in general I think the @use
seems to work.
Sadly I still have problems with my use-case :/
I'm still trying to grasp the specific problem and what exactly is failing.
There are now some specificity problems, but I'm not even sure if they are related with @bulvar or coming from the organisation of the code.
My current suspicion is that by importing the @bulvar/bulma utilities in every component (I need them to be able to access bulmas mixins) I overwrite the overwrites that happened after the global import (hope it's clear what I mean here).
To quote the sass documentation for @use:
Any styles loaded this way will be included exactly once in the compiled CSS output, no matter how many times those styles are loaded.
Since every Vue component seems to be seen as isolated by Sass I think everything gets imported over and over again :/
The original Bulma didn't render CSS output when importing the utilities so that's why there this wasn't an issue.
I might be able to solve this by not importing the whole utility folder but only the mixin part, but I have to check if there is a need other parts of the utilites.
I'm not sure yet though, so I'll check the details when I know more. Just wanted to keep you updated =)
from bulvar.
That's awesome =) If you want some input I'm happy to help
from bulvar.
@dpschen pushed "buildable" PR.
Imports are bit verbose, but seems easier to understand what is are coming from where.
Be my guest to check it out. I'm open for any suggestions
from bulvar.
Wow that's amazing work @daniil4udo ! =) 🥳
By "buildable" you mean that you still expect errors be included?
Imports are bit verbose, but seems easier to understand what is are coming from where.
I guess that's also a bit by design (from Sass) so that you can always see where stuff is coming from.
Be my guest to check it out. I'm open for any suggestions
At first glance it looks exactly how I imagined it to be. Also I really like the new index files (I never got why bulma uses these _all
files).
I might take a few days to check that out if it works in practise =)
from bulvar.
👋 Hey @daniil4udo,
I just tried to test this branch in my project but didn't find out how to install the package from that feature branch.
I think the problems come from the package beeing a monorepo:
error Can't add "@bulvar/bulma": invalid package version undefined.
Using (still) yarn v1.
How can I test this project if I only want to import individual sass files?
Related might also be that it now uses the Sass path (can't figure out how to add this to my vite setup / how to debug my tries adding them there).
from bulvar.
Okay I was now able to install it by cloning the repo next to my project folder and add the package via changing the entry in the package.json directly:
"@bulvar/bulma": "link:../bulvar/packages/bulma",
When I run my app I now get this:
╷
1 │ @use "utilities/derived-variables" as vars
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
../bulvar/packages/bulma/sass/base/generic.sass 1:1 @import
src/styles/global.scss 15:9 @import
src/App.vue 3:9 root stylesheet
Plugin: vite:css
File: /[...]/bulvar/packages/bulma/sass/base/generic.sass
Error: Can't find stylesheet to import.
╷
1 │ @use "utilities/derived-variables" as vars
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
../bulvar/packages/bulma/sass/base/generic.sass 1:1 @import
src/styles/global.scss 15:9 @import
src/App.vue 3:9 root stylesheet
After reading this issue, I tried adding a index.sass
suffix to the import in the generic.sass but that throws the same error on the changed import path. I thought it might be a regression 🤷
I did add an entry to the vite.config.js to configure the load path of sass. But I'm not sure if it's recognised. Looks currently like that:
css: {
preprocessorOptions: {
scss: {
includePaths: ['node_modules/bulvar/bulma/packages/sass'],
},
},
},
I also tried some other paths, but that also didn't work out :/
I know this is not a problem specific with this library. I just want to document my process trying to make it work.
Maybe it makes sense to remove the load path and use absolute paths inside the lib to make it easier to use the sass files directly?
from bulvar.
Thank you @dpschen for putting your efforts in testing.
There are now some specificity problems, but I'm not even sure if they are related with @bulvar or coming from the organization of the code.
Isn't the idea of SASS Modules to prevent overwrites by namespacing things?
Maybe what you can do, if you have mixins in your project, just try to add@forward '@bulvar/bulma/utilities/mixins'
at the top of your file, and import that instead?
Same technique has been used in the derived-variables.sass
, not to import both files, you can import just derived-variables
to have access to all bulma variables 🤷♂️
from bulvar.
Related Issues (7)
- Dependency Dashboard
- Delete styles not getting included HOT 3
- RGB colors in derived-variables.sass are invalid caused by missing bulmaToRGB function HOT 1
- Some default variable values missing HOT 1
- How to import functions.sass to create custom colors? HOT 7
- 0.11.0 regression/bug when providing a map to $custom-colors HOT 2
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 bulvar.