I'm using the generator-gulp-angular library. In development, everything, including my CSS, works perfectly. When I do a production build, most of the CSS isn't being loaded.
The symptom of the problem is pretty simple. After I do a gulp build, my single CSS file looks like this:
#import url(assets/css/application/dashboard.index.css);
#import url(assets/css/application/detail.alerts.css);
#import url(assets/css/application/detail.index.css);
#import url(assets/css/application/detail.map.css);
#import url(assets/css/application/detail.pod.css);
This goes on for a while. (I had to drop in a bunch of CSS files created by a separate development team.)
The same exact thing happens in development mode, but in development the imported files are found and in production they're not. (Production is Heroku, FWIW.)
The main thing I can't understand is why the heck the CSS files are found in development. This is what a tree of .tmp looks like:
.tmp
├── partials
│ └── templateCacheHtml.js
└── serve
├── 404.html
├── app
│ ├── index.css
│ ├── index.js
│ ├── vendor.css
│ └── views
│ ├── shipments
│ │ └── index.html
│ └── user-sessions
│ └── new.html
└── index.html
6 directories, 8 files
There's obviously no assets/css/... in .tmp. The only place, for example, dashboard.index.css exists is in assets/css, which lives in src/app/ as opposed to public or anything like that.
I'm pretty stumped. Any guidance would be appreciated.
I ended up changing all css to scss and that fixed the problem.
Related
I have a RoR application that is working fine. I embedded an another one in to that one (Thredded). Everything is working fine, except that this other application does not apply css style...
my ./app/assets/stylesheets/application.scss file look like this:
#import "thredded";
#import "font-awesome";
and my stylesheet directory look like this:
./app/assets/stylesheets
├── application.scss
├── ckeditor
├── errors.scss
├── fonts
├── foundation_and_overrides.scss
├── scaffolds.scss
├── thredded
└── v1
The Thredded directory (the application I am trying to embedded):
./app/assets/stylesheets/thredded
├── base
├── _base.scss
├── components
├── _dependencies.scss
├── _email.scss
├── layout
├── _thredded.scss
└── utilities
I am probably doing something wrong, but I am not really into RoR, and I can't understand what...
RAILS_ENV=production rake assets:precompile
Solve the issue ! thanks
I'm having this rather annoying trouble that I'm having some issues understanding when my Sass compiles.
I have a SCSS folder that compiles to a CSS folder in the root of my site, but in my SCSS folder I have individual folders for layout, utilities, etc.
The issue I am having is within my SCSS structure I have a vendors folder that houses everything from Bootstrap Grid, Font Awesome, etc. To keep the structure of the vendors folder neat and tidy I like to keep each vendor add on in a seperate folder. I use the following watch command:
sass --watch scss:css
Here's the file structure where ... is the files within the folder.
project-name/
├── scss/
│ └── style.scss
└── vendors/
├── bootstrap-grid
│ └── ...
└── fontawesome
└── ...
The issue I have when compiling to the CSS folder, the vendors folder and its contents are being compiled to the CSS folder:
project-name/
├── css/
│ └── style.css
└── vendors/
├── bootstrap-grid
│ └── ...
└── fontawesome
└── ...
Thanks in advance :)
Try using this command:
sass --watch scss/style.scss:css/style.css
I really like eslint for es6 projects. Previously I've used it for new projects. Now I want to add it to a legacy project.
Fixing all pre-existing lint issues in one go is too much effort. Can I configure eslint (in .eslintrc.js) to only check files where I've explicitly enabled it with /* eslint-enable */ or similar?
ESLint has no default-disabled state that can be toggled by a file comment. You might be able to use .eslintignore for this purpose, however. You can ignore everything and then gradually whitelist files as you migrate them by using ! to un-ignore individual files. For example:
.
├── .eslintignore
├── .eslintrc.js
├── package.json
├── node_modules
│ └── ...
├── src
│ ├── index.js
│ └── module
│ └── foo.js
└── yarn.lock
Then your .eslintignore could look something like this:
# Start by ignoring everything by default
src/**/*.js
# Enable linting just for some files
!src/module/foo.js
In this case, src/index.js would be ignored, but it would lint src/module/foo.js.
I am using Sprockets with Sinatra, as suggested in Sinatra's page docs, but I can't make it work.
When I go to localhost:4567, the page loads correctly but with no styles. If I go to localhost:4567/assets/app.css, I get a not found error. I wonder what I am missing or what is wrong in the way I am using Sprockets?
This is my folder structure:
├── assets
│ ├── css
│ │ ├── app.css
│ │ ├── base.css
│ │ └── normalize.css
├── bin
│ └── app
├── lib
│ ├── app_assets.rb
│ └── main.rb
├── spec
│ ├── spec_helper.rb
│ └── main_spec.rb
├── views
│ └── index.erb
├── Gemfile
├── Gemfile.lock
├── Rakefile
├── .rspec
└── .ruby-version
The contents of app.css are:
//= require normalize
//= require base
The contents of app_assets.rb are:
module AppAssets
def self.environment root_path
environment = Sprockets::Environment.new root_path
environment.append_path './assets/css/'
environment
# get assets
get '/assets/*' do
env['PATH_INFO'].sub!('/assets', '')
settings.environment.call(env)
end
end
end
The contents of lib/main.rb are:
require 'sinatra'
require 'sprockets'
require 'app_assets'
class Main < Sinatra::Base
set :views, "#{settings.root}/../views"
get '/' do
erb :index
end
end
The file views/index.erb contains the line:
<link rel="stylesheet" href="assets/app.css">
And the contents of bin/app are:
#!/usr/bin/env ruby
$LOAD_PATH.unshift File.join(File.dirname(__FILE__), '..', 'lib')
require 'sinatra'
require 'sprockets'
require 'app_assets'
require 'main'
Main.run!
Which I run typing:
$ bin/app
Any help would be appreciated, I'm sure I made something wrong but I can't see what. Can anybody spot it?
The app_assets.rb file is the problem here. When you require this file inside another file, the methods you define inside this module are not automatically included. You need to explicitly include AppAssets wherever you need the self.environment method to exist.
The second issue here is that self.environment is not equivalent to settings.environment. If I understand correctly, what you're trying to do is define the asset routing whenever the module gets included. To achieve this one way is to use the included hook for modules. This hook gets run every time you include a module inside a context. If you use that, the code in app_assets.rb turns to:
module AppAssets
def self.included(klass)
environment = Sprockets::Environment.new klass.settings.root
# note the change to path. Since the file where this gets included
# is inside a sub-folder, we need to traverse to one level above.
environment.append_path '../assets/css/'
klass.set :environment, environment
klass.get '/assets/*' do
env['PATH_INFO'].sub!('/assets', '')
klass.settings.environment.call(env)
end
end
end
The klass argument to this hook is the class into which this module is included. In our case this is the Sinatra class you've described in main.rb. That file looks like:
class Main < Sinatra::Base
include AppAssets
# Same as what you have
end
There's a Sinatra Recipes article about using Sprockets with Sinatra: http://recipes.sinatrarb.com/p/asset_management/sprockets?#article
First of all, I am familiar with what the Meteor docs say about this, which I have summarized here:
Files in subdirectories are loaded before files in parent
directories, so that files in the deepest subdirectory are loaded
first, and files in the root directory are loaded last.
Within a directory, files are loaded in alphabetical order by
filename.
After sorting as described above, all files under directories named
lib are moved before everything else (preserving their order).
Finally, all files that match main.* are moved after everything else
(preserving their order).
(Not sure why they say "moved" instead of "loaded", but I think they just mean "loaded".)
My app has the following structure:
├── client/
│ ├── html/
│ │ ├── main.html
│ │ ├── nav.html
│ │ └── login.html
│ ├── js/
│ │ ├── lib/
│ │ │ └── util.js
│ │ ├── main.js
│ │ └── nav.js
│ └── my_app.less
├── packages/
│ └── some_stuff_here
├── server/
│ └── main.js
├── shared.js
├── smart.json
└── smart.lock
In client/js/nav.js file I have the following JavaScript code:
Template.nav.nav_close = function() {
return ! Session.get(slugify(this.name)+'-nav-close')
}
In client/js/lib/util.js file I have the following JavaScript code:
var slugify = function(value) {
if (value) {
return value.replace(/\s+/g, '-').replace(/\./g, '-').toLowerCase();
}
}
My understanding is that the client/js/lib/util.js file should get loaded first, which will make my slugify function available, and then client/js/nav.js should get loaded and the slugify function should be available to it.
In fact what happens is that I see the following error in my Chrome console:
Exception from Deps recompute function: ReferenceError: slugify is not defined
at Object.Template.nav.nav_close (http://localhost:3000/client/js/nav.js?4d7c7953063828c0e4ec237c1a5c67b849076cb5:2:26)
Why am I getting this error?
slugify has file scope because it is declared with var. Remove var to give it package (application) scope.
Meteor Namespacing
slugify = function(value) {
if (value) {
return value.replace(/\s+/g, '-').replace(/\./g, '-').toLowerCase();
}
}