My repo SelfFunderworks perfectly fine at my local machine. When I am deploying on Heroku, I observe the errors as shown below:
Error compiling CSS asset
Sass::SyntaxError: File to import not found or unreadable: homepage/key_points.
Load paths:
/app/app/assets/images
/app/app/assets/javascripts
/app/app/assets/stylesheets
/app/vendor/assets/javascripts
/app/vendor/assets/stylesheets
/app/vendor/bundle/ruby/2.0.0/gems/jquery-ui-rails-4.1.0/app/assets/images
/app/vendor/bundle/ruby/2.0.0/gems/jquery-ui-rails-4.1.0/app/assets/javascripts
/app/vendor/bundle/ruby/2.0.0/gems/jquery-ui-rails-4.1.0/app/assets/stylesheets
/app/vendor/bundle/ruby/2.0.0/gems/jquery-ui-rails-3.0.4/app/assets/javascripts
(in /app/app/assets/stylesheets/main.scss:3)
/app/app/assets/stylesheets/homepage.scss:3
I identified the path and observed that homepage/key_points is residing under the following path on my local machine:
/views/preorder/homepage/_key_points.html.erb
Upon modifying the contents of homepage.scss (as shown below), Heroku still throws up the same error.
#import "preorder/homepage/key_points";
Appreciate if someone can guide where I am going wrong?
I'm not sure what's your intention there, but you are trying to import a HTML file into a CSS file, which would produce broken CSS if it were successful.
And you can only import files for assets from certain locations (app/assets, lib/assets or vendor/assets).
In your case, the clue is on /app/app/assets/images. Notice the double app there. First, please follow the guide on setting up assets compilation for Rails 4 on Heroku.
You seem to be missing gem 'rails_12factor', group: :production on your Gemfile.
I got the issue fixed. I overlooked /assets/stylesheets/homepage directory. It had some .css.scss files which upon renaming to .scss fixed the issue.
Related
I have been creating a site on my IDE and it has been working perfectly. But I ran into problems when deploying to Netlify. After changing all my file names to lowercase, now my 'header.css' file is not importing into header.js. I have checked the file path and it is correct. Can anyone please help me?
https://github.com/genesis16/alphaomega
changed file names to lowercase.
changed npm versions
installed css loader
changed file path to './components/header.css'
import './header.css' import '..components/header.css'
warning in ./src/components/Card.js ⠀ There are multiple modules with
names that only differ in casing. This can lead to unexpected behavior
when compiling on a filesystem with other case-semantic.
I have saved the file as card.js to pass Netlify's casing requirements. But it is still showing in my error log with capital Card.js.
I expected to run Gatsby develop and have my site load up properly with the header.css file imported.
I've used Scout before but haven't run into this problem... when I save a change to an scss file (the scss directory is specified as the "input" folder) which should then rewrite my styles.css file (in the specified "output" folder), I am given an error from scout stating "Error on line 61 of c: File not found or cannot be read:", and it then point to an image file in a separate folder within the site I'm working on.
Why could this be happening? I tried create two Scout projects for the same site: One where the root folder of the site is selected as the main directory and one where the folder a few levels into the site containing the scss and css files are held, but got the same results from both. I don't know why scout would be going into an image folder when the input/output folder are explicitly selected.
How can I make it so Scout just detects changes to my scss files and rewrites the css file without any nonsense about image files? Any help would be appreciated.
Edit: I hope this can give some insight, but the file that seems to be causing the error is being described in a location it is not in: C:\Users\me\Desktop\project/logo.png
There is a logo.png file in another location (C:\Users\me\Desktop\project\apply\assets\img\logo.png) but that doesn't seem to account for the error message. Very puzzled.
Second Edit: I'll try to give this one last bump with a little more info. At this point when I save a scss file I am still getting the same long error message in the scout app about an error, but my style.css file has stopped being affected at all since yesterday. The last message I got was a syntax error and then a very long backtrace message that looks something like this...
Backtrace:
C:/Users/me/Desktop/project/apply/assets/scss/_base.scss:6
C:/Users/me/Desktop/project/apply/assets/scss/style.scss:12
c:/program files (x86)/scout/vendor/gems/gems/sass- 3.2.1/lib/sass/../sass/script/variable.rb:49:in `_perform'
c:/program files (x86)/scout/vendor/gems/gems/sass-3.2.1/lib/sass/../sass/script/node.rb:40:in `perform'
c:/program files (x86)/scout/vendor/gems/gems/sass-3.2.1/lib/sass/../sass/tree/visitors/perform.rb:294:in `visit_prop'
org/jruby/RubyKernel.java:2096:in `send'
I am trying to set up my Meteor app with Ionic (using meteoric:ionic). I followed the instructions given (#import statements), also accounting for the known issue with the files being copied only on the second run. Still, I get this error:
=> Errors prevented startup:
While processing files with fourseven:scss (for target web.browser):
/client/style/app.scss: Scss compiler error: File to import:
{}/client/style/.meteor/local/build/programs/server/assets/packages/meteoric_ionic-sass/_ionic
not found in file: /Users/me/repos/brkn/{}/client/style/app.scss
While processing files with fourseven:scss (for target web.cordova):
/client/style/app.scss: Scss compiler error: File to import:
{}/client/style/.meteor/local/build/programs/server/assets/packages/meteoric_ionic-sass/_ionic
not found in file: /Users/me/repos/brkn/{}/client/style/app.scss
=> Your application has errors. Waiting for file change.
Somehow, all paths are prepended by {}/client/style/, which is the location of my app.scss file (can't explain the curly braces).
Can anyone tell what may cause this? How would I fix it?
That repo is no longer maintained.
Please use this official ionic package for meteor meteor add driftyco:ionic
So I just uploaded my site to heroku but none of the styles are showing. I have no idea what the problem is.
Heroku site http://shielded-garden-1674.herokuapp.com/
This is my Github repo https://github.com/LaurentLousky/todolist
This is what "heroku log" gives me. http://pastebin.com/cj17Pc4a
Im using Foundation 5 for styling.
Thank you all so much, any help is highly appreciated.
By default, Heroku will not serve your assets. You should add this to config/application.rb:
config.serve_static_assets = true
Or add this to the Gemfile and run bundle install :
gem 'rails_12factor', group: :production
See https://devcenter.heroku.com/articles/rails-4-asset-pipeline#serve-assets and https://devcenter.heroku.com/articles/rails-asset-pipeline for a more thorough explanation
I am not able to see your Heroku app.
However, check if your code adds/links your css files in the same way your files are named. For example if in your code your files are named "Styles.css", make sure your code states the name of your files as "Styles.css" and not "styles.css" because once in Heroku cloud, system may not recognize the file.
I have a pretty basic SASS setup running, which includes the following folder structure:
css
style.css
-modules
_all.scss
_globals.scss
partials
_base.scss
_normalize.scss
_styles.scss
vendor
-empty
I am telling SASS to watch the following sass --watch modules/_all.scss:style.css --style compact.
The issue is, that one one machine a change to ANY file included in _all.scss is recorded and output properly. On another machine, completely up to date, a change to a partial file thats included in _all.scss does not record a change, and therefore no styles are output. I have to reset SASS to watch the partial _all.scss once more for the change to be recorded.
Has anyone experienced these inconsistencies before? I'm not looking to watch an entire directory as I wish to have only a single stylesheet output...
Both builds have the same version of sass, ruby and command line tools running.
It seems like the sass-cache is not being busted when you make the change. You can try disabling the cache on the broken machine to see if the problem resolves. If it does, check manually delete the cache directory and try again.
Side note, you shouldn't have to use the watch command with rails (unless you're doing something unique). Sprockets is supposed to have plugins which do this automatically when serving assets.
In fact, I suspect that this may even be a conflict between sprocket's SASS engine configuration and the sass watcher binary configuration.
See the default cache configuration for the sass binary here: http://sass-lang.com/documentation/file.SASS_REFERENCE.html#cache_location-option