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
Related
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
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.
Sass updates my main stylesheet build.css when I save changes to build.scss, but will not update build.css when I save changes to any partials, for example _grid-settings.scss. I essentially have to manually re-save build.scss each time I make a change to a partial in order for Sass to detect a change.
From my terminal:
Justins-MacBook-Air:ageneralist justinbrown$ sass --watch stylesheets:stylesheets
>>> Sass is watching for changes. Press Ctrl-C to stop.
write stylesheets/build.css
[Listen warning]:
Listen will be polling for changes. Learn more at https://github.com/guard/listen#polling-fallback.
My directory is:
stylesheets/
├── base
│ └── _base.scss
├── build.css
├── build.scss
├── layout
│ └── _layout.scss
└── vendor
├── _grid-settings.scss
├── bourbon
├── highlight
└── neat
I'm using:
Sass 3.3.8.
Ruby 2.0.0-p353
OSX 10.9
I've looked through several SO posts on issues with sass --watch but none have helped yet to guide me to a solution.
EDIT: I'm adding my build.scss here just in case that's the issue:
#import "vendor/bourbon/bourbon";
#import "vendor/grid-settings";
#import "vendor/neat/neat";
#import "base/base";
#import "layout/layout";
I had the same issue.
I managed to fix it by deleting the SASS cache directory. I also ran sudo gem update to update all gems on my system.
I'm not sure which of these things fixed it or if it was a combination of the two.
I had also stuck to the problem of Sass seemed wasn`t watching all file changes correctly.
Sass can`t watch changes in files that are located by the path directing upwards the watching file. For example:
Variant A (Which I had)
scss/
├── base
│ └── controller1.scss
├── utils
│ └── utils.scss
└── app
└── app.scss
Where app.scss is:
#import '../base/container1'
#import '../utils/utils'
compiling
sass --watch app/app.scss:../css/styles.css
sass --watch app:../css
In both cases sass tracks only app.scss file changes, but not controller1.scss or utils.scss
Variant B (solution)
scss/
├── base
│ └── controller1.scss
├── utils
│ └── utils.scss
└── app.scss
Where app.scss:
#import 'base/container1'
#import 'utils/utils'
compiling
sass --watch app.scss:../css/styles.css
Variant C (solution) also works
scss/
├── base
│ └── controller1.scss
├── utils
│ └── utils.scss
└── app.scss
Where app.scss:
#import 'base/container1'
and controller1.scss:
#import '../utils/utils'
// ...
This isn't a satisfactory answer for me, but I ended up trying out another gem that would handle preprocessing, guard-livereload, and though it itself didn't work, when I came back to try sass --watch sass properly monitored my stylesheets directory for changes (partials included) and subsequently recompiled build.scss.
I'm not certain why it works now, but am guessing one of the gems installed along with guard or guard-livereload solved the issue. Perhaps listen or fssm?
interface FileImporter {
findFileUrl(
url: string,
options: {fromImport: boolean}
): FileImporterResult | null;
}