I'm having a problem with assets loading in Heroku and haven't been able to resolve this issue on my own. Right now, I am unable to get assets to load on my app in Heroku.
I was told that I needed to precompile my assets locally. The only way I could get this to work was by changing = require_self and = require_tree . in application.css manifest to #import. From there I was able to run rake assets:precompile, but no styles loaded on Heroku or locally. I switched things back and now styles show up locally, but I can no longer push to heroku. I get this error:
rake aborted!
Sass::SyntaxError: Invalid CSS after "...AwesomeEotPath:": expected pseudoclass or pseudoelement, was " 'fontawesome-..."
(in /tmp/build/app/assets/stylesheets/application.css)
(sass):7153
Based on the error message you posted there is a syntax error in your sass file. Is there a comma after that line around 7152 or 7153? Or maybe " ; " instead of " : " ?
Related
Angule 4.3.3, angular cli, MVC
When i compile my code in my dev enviroment with ng build all works fine i can see the styling.
but when i do ng build -prod for prodaction enviroment the complitaion success i do get all js bundle files.
but in the browser (Chrome) i get an error:
Uncaught SyntaxError: Invalid or unexpected token
on file styles.14098r3...bundle.css
in my tsconfig.json, the target: "es5".
why in my dev enviroment all works fine but in my prod the style not working?
please help me to resolve this problem.
Edit:
I in dev the html tag for style look like:
<script src="/dist/styles.bundle.js"></script>
but in prod html for style look like:
<script src="/dist/styles.149025e8452.bundle.css">
if i change the prod style tag to link instead script the style work fine.
---I generate the script from mvc bundles---
I've had the same issue. Here's what I ended up doing:
In your bundle config:
bundles.Add(new ScriptBundle("~/bundles/angular-components")
.Include("~/Client/app/dist/inline.bundle.js")
.Include("~/Client/app/dist/polyfills.bundle.js")
.Include("~/Client/app/dist/styles.bundle.js")
.Include("~/Client/app/dist/vendor.bundle.js")
.Include("~/Client/app/dist/main.bundle.js")
.IncludeDirectory("~/Client/app/dist/", "*.js.map", false));
bundles.Add(new StyleBundle("~/bundles/angular-components-style").Include(
"~/Client/app/dist/styles.bundle.css")
);
In your layout, you import both the style and script bundle:
#Styles.Render("~/bundles/angular-components-style")
#Scripts.Render("~/bundles/angular-components")
And when you build your angular app, use the no hash option:
ng build --prod --watch -oh none
That way if you build for with or without the --prod option, your output files will not have any hash. When in dev, it will render the styles.bundle.js as a script and when built in prod, it will render it as a link using styles.bundle.css
I tried to precompile my project on production but it gives me this error and I don't know as to where it is pointing to since it's really vague.
Sass::SyntaxError: Invalid CSS after "": expected selector, was "#media print"
(in /home/deploy/production/project-name/app/assets/stylesheets/admin.css)
(sass):124
The path links to the manifest file of the admin/ folders of my assets.
Some of the stylesheets' format is .css.scss.erb.
Check your sass files in your app/assets/ directory.
I think you're using sprockets in your admin.css at line 124?
You'll see the file you want to include having an sass syntax error.
Example:
# app/assets/admin.css
/* ..
(line 124) * require my-file
.. */
now you should look for the my-file.
I am using the grunt-webpack. Trying to start the webpack-dev-server gives this error
Module parse failed: /u/saxenat/react-blueprint/src/js/app.jsx Unexpected token (5:16)
You may need an appropriate loader to handle this file type.
Before you close this question, let me just say: webpack is bundling the files properly. The grunt-webpack plugin provides 2 tasks: grunt-webpack and grunt-webpack-dev-server. When I try HMR with the server, it is failing. Otherwise it works fine.
I have included babel-loader with presets es-2015 and react.
Any ideas?
I saw similar questions but the error clause is a bit different, an I think is something about the assets pipeline.
The error:
NoMethodError: undefined method '[]' for nil:NilClass
(in app/app/assets/stylesheets/entypo.css)
/app/vendor/bundle/ruby/1.9.1/gems/sass-rails-3.2.6/lib/sass/rails/helpers.rb:32 in 'resolver'
What I did was to implement a Boostrap theme in the vendor directory, so is already included in the assets pipeline.
The entypo.css is the first file required by the theme main file called style.css , which is placed in
app/assets/stylesheets/
while entypo.css is placed in:
vendor/assets/stylesheets/
I'm not sure that the error resides here, because locally everything works just fine, the issue comes when I deploy on Heroku, because for some reason the compiler seeks for the css to compile in
app/app/assets/stylesheets/entypo.css
Any clue?
I just trying to generate a compass image sprite with assetic in symfony 2.2 project. I configured compass filter and i have some .scss files working perfect. But when I try to generate an image sprite and run ./app/console assetic:dump --watch throw an error:
[error] An error occurred while running:
'/usr/bin/ruby' '/usr/local/bin/compass' 'compile' '/tmp' '--images-dir' '/home/xuser/desarrollo/www/lab.dev/symfony/app/../web/images' '--config' '/tmp/assetic_compass5atwLN' '--sass-dir' '' '--css-dir' '' '/tmp/assetic_compassiAf1jw.scss'
Error Output:
Errno::EACCES on line 43 of /var/lib/gems/1.8/gems/chunky_png-1.2.7/lib/chunky_png/canvas/png_encoding.rb: Permission denied - /tmp/images/sprite-s8c89b4f1b7.png
Run with --trace to see the full backtrace
Output:
...
I note the sprite is generated fine, but copied in /tmp/images/.
I currently I do the same thing in a stand alone compass project and work fine, the issue is throug assetic. Could you help me?