I have a Rails and ExtJS application which has all images under
MyApplication/app/assets/graphics
The styles are listed in the following file->
MyApplication/app/assets/stylesheets/css/styles.less
The following file seems to have a compiled version of all styles
MyApplication/app/assets/stylesheets/css/lt.css
I added a new image test.png under graphics folder. How can I compile this into the styles? So far, when I refer to this image in my code, it doesn't show up since it is not in the lt.css file.
Thanks!
UPDATE
Sorry, I didn't see that you have css folder within stylesheet folder.
According to Rails Guide, If you have other manifests or individual stylesheets and JavaScript files to include, you can add them to the precompile array in config/initializers/assets.rb:
Rails.application.config.assets.precompile += ['admin.js', 'admin.css', 'swfObject.js']
SASS & LESS both uses asset helpers asset-url($relative-asset-path) except that SASS is equipped with rails by default, so you could use this helper in your lt.less or lt.scss ( file extension is important )
background: image-url('test.png');
Just change your lt.css to .less or .scss and the image will show up, and it will be precompiled for you, after using asset helper.
In case that you want to compile to production run this from your terminal before deployment:
rake tmp:cache:clear
rake assets:precompile RAILS_ENV=production
I hope it helps
Related
I am using yarn with my rails 5.1 app (not webpacker, just the default asset pipeline).
Running a local server in development environment, I experience no issues with my assets.
But as soon as I precompile my assets (the environment doesn't matter) or let Heroku package my assets, all stylesheets (of node modules) I imported from within my application.sass file don't work anymore.
The reason for that behavior is that sass compiles all files into one output file, but because of some reason appears to miss the #import statements which include node modules and load these files separately.
So this:
#import "components/index.sass"
#import "nodemodule/nodemodule.css"
Compiles to this in development:
// content of "components/index.sass"
// content of "nodemodule/nodemodule.css"
and to this in production:
// content of "components/index.sass"
#import "nodemodule/nodemodule.css"
while loading node_module/nodemodule.css separately as an asset, but the browser cannot resolve it. Javascript works fine.
The links are from my project that you can use as reference
in your asset.rb you need to include the /node_modules path in your default load_path.
If you open the rails console and input Rails.application.config.assets.paths you should see the new path /yourproject/node_modules added.
Then you simply write:
#import "nodemodule.css"
In my case for bootstrap 4 in my application.scss
#import bootstrap/scss/bootstrap
which correspond to the file in node_modules/bootstrap/scss/bootstrap.scss
for jquery.js and bootstrap.js you can check my application.js
I was having the same problem. Inspired by this comment removing file extensions from the imports ended up fixing it.
This didn't work:
#import "#shopify/polaris/styles.css";
#import "#uppy/core/dist/style.css";
#import "#uppy/dashboard/dist/style.css";
while this did:
#import "#shopify/polaris/styles";
#import "#uppy/core/dist/style";
#import "#uppy/dashboard/dist/style";
The node_modules need to be installed with npm install for example, so they're probably not getting installed on Heroku. Check out https://devcenter.heroku.com/articles/using-multiple-buildpacks-for-an-app
Most likely, you need to setup a Node.js buildpack which will install your npm dependencies.
I have finally found the problem. It is a very nasty bug of the sass-rails gem & an unfortunate design of the sprockets component of Rails.
1) sass-rails
#import does not seem to work with node_modules as it does with other assets. While those other assets get compiled into one file, node_modules only get referenced, loaded by the browser as separate sources, but ultimately not being used by the browser.
2) sprockets
Sprockets' require statement does only work if it is at the beginning of a file. Or as they put it in their documentation:
Note: Directives are only processed if they come before any application code. Once you have a line that does not include a comment or whitespace then Sprockets will stop looking for directives. If you use a directive outside of the "header" of the document it will not do anything, and won't raise any errors.
However, in my case, I was importing directives from a file that itself was imported from application.sass.
I've built my portfolio site off of Github Pages. Now that I'm starting portfolio 2.0, I want to use Sass.
I've used Sass in the past but didn't have to set it up directly. So far I've installed Sass using gem install sass and have my file setup, but am not sure how to compile it properly.
File Structure:
styles.css
scss/
_banner.scss
Styles.css content:
#import 'scss/_banner';
Am I missing the compiling step somewhere? It is even possible to use Sass on Github Pages?
For my solution I replaced scss/_banner.scss with styles.scss, opting to not create partial files for a single page application.
Then all you have to do is run $ sass --watch css/styles.scss:css/styles.css in the terminal and your CSS will be compiled each time you save your Sass file. This command points your computer to which file to compile and to where.
Thanks to #dommmm for directing me to the solution with the youtube video in the question comments.
Situation
Use bower In .bowerrc
In bowerrc set directory vendor/assets/bower_components
In config application.rb I typed config.assets.paths << Rails.root.join('vendor', 'assets', 'bower_components')
Install gallery plugin called «fotorama», do it by bower
All files of plugin «fotorama» now storage in this directory "/vendor/assets/bower_components/fotorama"
In manifest css file application.css I type *= require fotorama/fotorama.css
In layout file I typed <%= stylesheet_link_tag "application" %>
Starting server rails server — everything is ok. In source of generated page I see <link href="/assets/fotorama/fotorama.css?body=1" rel="stylesheet" />. This css file has this line .fotorama__video-play {background: url(fotorama.png) no-repeat}, and many other lines where uses url for file "fotorama.png", and it is ok, browser try to find this png file near the css file, and successfully do it.
Stop server, precompile all essets rake assets:precompile, and then run server in production environment rails server -e production
Problem
In production, all my css files concatenated, and in source of page it looks like this <link href="/assets/application-2d31fc33890d01b046194920367eb3d4.css" rel="stylesheet" />, and still this file has this line .fotorama__video-play {background: url(fotorama.png) no-repeat}. Now browser trying to find png file here http://localhost:3000/assets/fotorama.png, but it isn't here, it isn't anywhere, because, I don't know why, there is no "fotorama.png" in "public/assets" folder.
Questions
Why pictures didn't transport from "/vendor/assets/bower_components" to "public/assets"
Have you got an idea, what can I do to solve my problem? Important, that I don't want to change urls in css manually, programatically — ok.
Excuse me for my english, and thanks for everybody who going to help me.
Solution and answers
Only files from "app/assets" transports to "public/assets" by default. To transport images from "/vendor/assets" type in "application.rb" this code config.assets.precompile += %w(*.png *.jpg *.jpeg *.gif)
Task for gulp: if you see some changes in "bower.json", take all main files of bower components by npm moudle called "main-bower-files". Generate a manifest file with each css file with .erb extension, and save it "app/assets/stylesheets/bower_components_manifest.css"
This task continue: in every main css files, by npm module called "gulp-css-url-adjuster", add before every url <%= asset_path ' plus path to directory, and after ' %>. url("fotorama.png") >> url("<%= asset_path 'fotorama/fotorama.png' %>"). Add .erb extension and save.
In "app/assets/stylesheets/application.css" I add * require bower_components_manifest.
One of the other solutions, use gem "bower-rails". But I don't like it, because in some plugins in bower I need override some "main" files, and gem "bower-rails" can't do this, npm "main-bower-files" can. And I like to save my workflow for everything what I have done before start include my code to rails, gulp, bower.
I am using Netbeans 8.0 to edit my HTML, PHP, and CSS. Just today I have installed SASS and enabled it within Netbeans. I am developing on Ubuntu, and Ruby and Sass are both available in the repositories, so I installed them and Netbeans found the SASS executable with the click of a button. So, I assume it's all working.
I have created a file called style.scss, and put in some test colour variables and a dummy #test id.
My understanding was that when I saved the .scss file that it would get processed and a .css file with the same name, in this case style.css, would get created. Or updated if it already existed.
Is this not the case? I did see other SASS and .css file generation questions here on Stack Overflow, but I didn't see one specific to Netbeans, so I'm not sure if there's something I haven't set up correctly in my environment. Also, I don't need to upload to a server when saving, I am just testing and developing locally.
How do I actually generate a .css file from my .scss in Netbeans 8.0?
Right click on the project -> Properties -> CSS Preprocessors
You have to set an input folder, for example /scss, and an output folder like /css
And there is a checkbox "Compile Sass files on save".
For Compiler options " --style compact " can be useful.
This was working for me in NB7.4, but in 8, something happened...
The plugin page says, it's currently incompatible with 8.
http://plugins.netbeans.org/plugin/34929
UPDATE: My scss folder was wrong... So it's working in NB8.
Look # the project settings, and separate your .scss and .css files in two folder, the default folders are /scss and it converts files to /css folder
I'm using the Yeoman stack to bootstrap an application and had a question on how CSS files should be handled. (I've uploaded a sample on Github : https://github.com/ddewaele/jQueryDataTablesGrunt)
The basic question is : How do you go about handling different CSS files
during development (when running grunt serve)
when packaging the app (when running grunt build).
I have installed a number of libraries through bower that come with CSS files.
For example the jQueryDataTables library has the following CSS
bower_components/datatables/media/css/jquery.dataTables.css
Now, the way I understand it is that I should never reference this jquery.dataTables.css file directly in my index.html (I hope this assumption is correct).
My index.html should only contain
<link rel="stylesheet" href="styles/main.css">
I assume that this styles/main.css will be generated by the grunt workflow and will be correct both in dev mode, as well as in dist mode.
I'm puzzled by a couple of things
How should I tell grunt that I need to include for example bower_components/datatables/media/css/jquery.dataTables.css
Do I do need to reference that jquery.dataTables.css in my index.html, or in my Gruntfile.js, or simply drop it in app.styles ?
How does grunt decide what CSS files it needs to assemble into a single main.css
How does grunts behavior differ between grunt serve and grunt serve dist
Here's what I found :
grunt serve
When calling grunt serve , a CSS file is generated called .tmp/styles/main.css,
That is in fact the CSS file that is used by the app when it launched by 'grunt serve'.
That main.css file only contains stuff coming from the app/styles/main.scss file.
Other CSS files that are put in app/styles/ are not being picked up by grunt serve.
grunt serve:dist
When calling grunt serve:dist, a CSS file is generated called dist/styles/2314bw1.main.css
That is in fact the CSS file that is used by the app when it launched by grunt serve:dist.
That main.css file contains everything that it found in app/styles/*.css,
So the basic issue is that when running grunt serve , the generated main.css does not all the classes from all the css files found in app/styles/*.css.
However, when packaging the app grunt build or grunt serve:dist, it does contain all classes from all the css files found in app/styles/*.css.
How do I configure my app / grunt to use these external CSS, and how do I get to a situation that works during development, as well as during packaging.
I'm not familiar with Yeoman but it look likes it's running gruntjs underneath. You can edit the tasks to include plugin specific styles.
This is your gruntfile.js
How does grunt decide what CSS files it needs to assemble into a single main.css ?
Drop your plugin specfic styles inside "app/styles". You can give it a special folder if you want to. Then add to your main.scss. Sass will compile everything down in the main.css.
First in console:
cp jquery.dataTables.css jquery.dataTables.scss
Then add the import into main.scss
#import "jquery.dataTables"
How does grunts behavior differ between grunt serve and grunt serve dist?
serve:dist does this(see code below), it builds your files, opens a link to your server, creates a dummy webserver to serve your files using connect
if (target === 'dist') {
return grunt.task.run(['build', 'open:server', 'connect:dist:keepalive']);
}
serve on the other hand watches changes to your files.