Sass not working in Svelte and StorybookJS - sass

I am using Google Material on Svelte and thank GOD finally was able to successfully make it work. Now, I created it in a separate code base. On the other hand I am actually creating a separate codebase for different components in StorybookJS. So when I ported my working codebase (actually copy pasted the component) the button for example that I am testing is not working anymore. I checked all the necessary npm installations that I need and it's all good.
But now when I check the Developer Tools on my browser (I am using Brave) I got this error:
Refused to apply style from 'http://localhost:60809/theme-mui.scss' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
My theme-mui.scss mentioned on the error above is the initializer for my Google Material to work on Svelte (or other framework for that matter). I tried to transfer the above scss file to no avail. I followed the instruction of setup from my separate code base but it still is not working. I tried to follow the sass config using this link from Storybook but still to no avail. What could have gone wrong?

Related

Importing only the flags which I'm using in my app (flag-icons library). How importing from CDN works?

I've recently come across a way of importing font awesome icons which would allow the creation of a final bundle with only the icons in use FontAwesome documentation. I understand that the bundler (Vite in my case) applies tree shaking in order to create a smaller bundle.
I'm currently in the midst of developing an app that also uses flags. Thus I stumbled upon the following repository Flag Icons. I've installed the npm package and added the stylesheet to index.html. Everything works as expected.
Does using the library this way mean I imported all the flags in my project, even the ones I won't use? Is there a way I can create a smaller bundle with the ones I'm going to use?

Sass not compiling properly to application.css rails 7

I have setup a new rails 7 project with Bootstrap 5.2 and Sass, however when it comes to adding in custom styling (with Sass) Rails appears to not be compiling the Sass styling into app/assets/stylesheets/application.css. I have no errors to go off here and after spending far too long on the problem, decided to start fresh with the following setup instructions - https://railsbytes.com/public/templates/V2Gsg9
I had to remove the #import "bootstrap" code below as this throws a compilation error.
append_file 'app/assets/stylesheets/application.scss', <<-CODE
#import "bootstrap";
CODE
I'm unsure if this is relevant to the issue, however I was having issues with the bootstrap setup, where the JavaScript was not working, and followed the following setup from another stackoverflow https://stackoverflow.com/questions/70907799/bootstrap-5-javascript-functions-not-working-in-rails-7-app which has fixed this issue.
In summary, the only problem I'm now facing is that the css is not compiling. I found a number of other resources related to the same issue, however the setup is slightly different and when I try to run the solutions provided it does not work. I have seen multiple posts suggesting to attempt to run rails assets:precompile, which I did, however it broke all the styling setup and couldn't revert it back for some reason (part of the reason whey I started on a new project).
In addition to the new setup, I also tried this suggestion by "stevec" in the following https://stackoverflow.com/questions/71300845/custom-css-not-working-with-css-bundling-for-rails-7. This works, however it doesn't seem to be the Rails way of doing things. This suggests each stylesheet needs to be added to the app/assets/config/manifest.js and also to the application.html.erb file. To my understanding, each view should have its own style sheet which is then imported into application.css.
I feel I'm close to the solution but am finding it challenging at the moment to understand the documentation on the asset pipeline... Some recommendations suggest to install yarn/npm however I thought that's the benefit/job of importmap so have not gone down that path

Are there any naming conventions for filenames?

I'm new to nativescript and tried to open a modal.
Everything works fine if I use a filename like "connect-modal-page".
But if I use "connect" only I get the message:
JS ERROR Error: NativeScript encountered a fatal error: Error: Failed to load component from module: ./views/modals/connect.xml
So I guess there is something like a naming convention. But which?
The docs says there isn't any real convention.
Did I miss something?
This filename works:
connect-modal-page.xml
These filenames do not work:
connect-modal.xml
connect.xml
You are using NativeScript and bundling with Webpack (with the upcoming version this will be the default workflow). The thing is that Webpack needs to "know" about any resources that need to be bundled.
So to resolve this issue by design the NativeScript team has provided a pattern that will automatically bundle all pages that are ending with -page or -root. Any other resource that you want to become part of the bundle should be explicitly included in the webpack.config.js file (in the CopyWebpackPlugin section). So with NativeScript 5.x.x you will need to either rename all your files to end with -page or to add them explicitly in the webpack configuration. Note that I am talking about a project for NativeScript Core (plain JavaScript or TypeScript) and not NativeScript Angular.
From NativeScript 6 (upcoming release expected in mid-July2019) this won't be needed anymore and all *.xml and *.ts resources (talking about NativeScript Core) will be bundled by default.

Hyperledger composer generator: Trying to copy from a source that doesn't exist (no concepts support for Angular)

I have a composer-rest-server running on localhost:3000. To go with that, I tried to generate an Angular 2 app using yo hyperledger-composer. My business network models also have a abstract concept Spray{...} present.
I believe the documentation is outdated as I was presented with slightly different options than on the documentation. After choosing Angular and following through the steps, I got an
AssertionError: Trying to copy from source that does not exist ... /concept/concept.component.ts
Based on some quick google searches, I was able to find this issue on their Github - https://github.com/hyperledger/composer/issues/3927 however in my case, I am not even able to build the Angular app so I don't even get to the compilation stage.
Is there any way to build the app right now where it's at?
I've created a Github issue explaining steps to reproduce this and also included a hacky fix which is to comment out the lines in the generator code which copy over the concept files.
Link - https://github.com/hyperledger/composer/issues/4328

Using Babel in Production - How to precompile scripts

I'm building an application using Oracle Application Express (APEX) [so no existence of Node].
I have two issues which are somehow related concept-wise.
Issue #1:
I've included the React.js library in all of my pages to use some of its features.
I'm using babel to convert my JSX to simple JS. Everything's working fine.
But I keep on getting this warning in my console :
You are using the in-browser Babel transformer.
Be sure to precompile your scripts for production - https://babeljs.io/docs/setup/
I know I must precompile my scripts but I have no idea how. I visited the link and it got me all the more confused.
Issue #2:
The other issue I have is that I've got all my react related code in a separate .js file and I have embedded it in my page using this :
<script src="someJSFile.js" type="text/babel"></script>
Setting the type to "text/babel" raises this warning :
Fetching scripts with an invalid type/language attributes is deprecated
and will be removed in M56, around January 2017.
See https://www.chromestatus.com/features/5760718284521472 for more details.
Is there any workaround for this issue?
Issue 1: This is linked to what ever bunlder you choose (see issue 2 below). Which ever you do choose, will allow you to set the node env to production, which will put React in "production" mode - basically scraping out all the unneeded (but helpful) development messages and checks.
Issue 2: You will need some module bundler at the end of the day. Webpack is the goto at the moment. Webpack Site
Alternatives include:
Gulp + Browserify
Rollup
EDIT: I know you said "no node". You won't need node to run anything on the server, only on your local machine where you build the files. Node is easy to install on pretty much any local machine

Resources