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
Related
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?
So I'm trying to follow some tutorials on .Net core web apps.
I started running into issues first when I tried to use glyphicons. They never worked and I got the intellisense warning "Unknown CSS Class 'glyphicon'".
As I got further into the tutorials I would increasingly run into these types of CSS warnings. Input-Group-btn, btn-default, and panels all gave similar warnings and didn't work. But I thought I must have missed a step or something.
But now I'm looking at the default _Layout.cshtm and seeing similar warnings, and understanding that, that's probably why my pages don't look like the examples. Navbar-toggleable-sm is an unknown class.
To be clear, many of the classes work. Most, even.
I thought maybe it was just a version issue, but glyphicons and panels don't seem seem like they would be deprecated features.
I'm looking in my bootstrap distribution and it looks like I'm on version 4.3.1.
Why would these classes be missing and how could I fix this?
Ok, so the answer to this appears to be that many, MANY features have been changed between bootstrap 3 and 4, and Microsoft didn't update their templates. So by default bootstrap 4 is installed, but the pages generated use bootstrap 3 classes.
For glyphicon you can use FontAwesome.
Panels, thumbnails, and wells have all been replaced with cards.
More information can be found here.
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
I am new to SASS. I am using this as a guide to learn Bourbon -
http://www.git-tower.com/learn/bourbon-neat-bitters/getting-ready/introduction
I followed all the instructions and it displays fine on my local machine. But when I edit _layout.scss, it doesn't compile to styles.css. I installed Compass and had it watch the project folder, but same results. My changes won't take.
Am I missing a step?
This is likely more of a sass importing/file-name issue than anything specifically with bourbon. I'd check out http://sass-lang.com/guide . Sass-lang put together a really nice guide to sass that includes things like imports, etc.
Also, Compass app can bring some things to the party that can conflict with Bourbon. I'd recommend using the sass app or a desktop app like https://prepros.io which can be easier starting out.
Hope this helps 🍻
I seem to be having major issues with the asset pipeline in Rails 3.2. It alls started because I wanted to add a single, simple style to my application.css.scss whilst working in the development environment. I have done this in the past with no problem and it just works because there is no caching occurring (as you would expect).
However, when I attempted to add the new style today, Rails refused to load the updated styles. I checked my environment settings and they all seem correct in development.rb,
config.assets.compress = false
config.assets.debug = true
I did some research and came across rails 3.1 asset pipeline css caching in development. Following the advice given in that question, I made sure that I deleted the tmp/cache folder as well performed a clean using rake assets:clean just in case I had run the app in production mode at some point and it needed cleaning up.
After all this, still no luck. Just to confirm that I hadn't made a bonehead mistake, I temporarily moved the style to another stylesheet. No problems! It worked perfectly! So I moved the style back and it won't load again.
I also checked the console. It reloaded the other stylesheet correctly but no mention of the original stylesheet.
Now, here comes the major issue. As a last ditch effort, I tried clearing my browser cache. I normally have no problems with it on but I thought something might be cached and causing problems. I cleared it and reloaded the app and.... no styles loaded whatsoever!
It seems that all of my application.css.scss styles were cached at some previous point and now I simply can't reload them!
UPDATE:
Although I still haven't fixed the problem, I've worked around it by creating a new stylesheet called main.css.scss (name not important) and moving all of the styles to the new stylesheet. This works because of the //= require_tree . directive in the manifest.
But if anyone can shed some light on why the original stylesheet stopped working, I would love to know!
try rm -r public/assets/*
maybe your assets:clean task is not working properly.