I've been looking into Compass and the more I look, the more it feels like the way that CSS should be written. As a test case, I'd like to use it in one of my CakePHP projects. Unfortunately, I'm having some trouble with the initial configuration. Specifically, with getting the resources in the right place and referenced properly in the compiled CSS.
I'm creating a :stand_alone project in my /app directory. Well, that's what I want to do. Compass doesn't seem to like that. In creating the project, I've told it where to put the css, images and js and those resources do, in fact, make it to the proper directory. Unfortunately, because I'm not creating the directory in the webroot, the resources are being referenced incorrectly when compiled.
I'm creating the Compass project in my CakePHP app/ directory with this command:
$ compass -f blueprint --sass-dir sass --css-dir webroot/css/ --images-dir webroot/img/ --javascripts-dir webroot/js/ --output-style compact .
The compiled CSS, though, wants to reference Blueprint's showgrid.png image as:
url('/webroot/img/grid.png?1264969358')
I suppose this is a pretty predictable result, but I can't figure out how to get the compiled CSS to reference the correct /img/grid.png?whatever path. Is that even possible? Am I forced to create my Compass project directly in my webroot?
Thanks.
UPDATE
Content of my config.rb file:
# Require any additional compass plugins here.
project_type = :stand_alone
# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "webroot/css"
sass_dir = "sass"
images_dir = "webroot/img"
http_images_path = "/img"
javascripts_dir = "webroot/js"
output_style = :compact
Running Compass v0.10 and using the following configuration:
# Require any additional compass plugins here.
# Set this to the root of your project when deployed:
http_path = "/"
sass_dir = "sass"
css_dir = "webroot/css"
images_dir = "webroot/images"
javascripts_dir = "webroot/js"
http_stylesheets_dir = "css"
http_javascripts_dir = 'js'
http_images_dir = 'images'
# To enable relative paths to assets via compass helper functions. Uncomment:
# relative_assets = true
provides the expected results.
Compass v0.10 is just about to be release, you can install it with:
(sudo) gem install compass --pre
To create a project using this config:
Create a project directory
Save the config into config.rb in the project directory.
From within your project directory run the command: compass install blueprint
Rails and other frameworks have the sass files and configuration in the project root, outside the public webroot. A stand-alone project should work fine this way too.
Are you using image_url() for when you're referencing an image?
In your compass.config file you can set the http_images_path if it's different from your directory path. See the configuration page in the wiki for more details.
Related
I have a file that i need compulsory to make my application work,i am able to use the file in development by specifying fixed path var path = process.cwd() + '/src/app/components/task/Scripts'; and the file name after that,but after packaging the app i want to move the file i need in extraResources folder in system from where i will be able to use it let path = pathPackage.join(process.resourcesPath, 'extraResources');,i am using electron-forge maker to produce a production build exe,how ever there is no extraResources folder created after installing the exe,i am specifying it in package.json file
"build": {
"extraResources": [
"./extraResources/**"
]
},
Can someone provide a solution for it,i have tested all examples but none of them worked
As it mentions in the documention (actual options documented here), you can add files using the extraResource option of the packagerConfig configuration.
extraResource
extraResource: string | string[]
One or more files to be copied directly into the app's
Contents/Resources directory for macOS target platforms, and the
resources directory for other target platforms. The resources
directory can be referenced in the packaged app via the
process.resourcesPath value.
For example, in your package.json file:
{
"config": {
"forge": {
"packagerConfig": {
"extraResource": [
"./src/extraResources/file.txt",
"./src/extraResources/folder"
]
}
}
}
}
The files will be placed in the process.resourcesPath directory when running npm run package.
I had a RCP application that uses a plug-in project as dependency. I have added the plug-in project into MANIFEST.MF of my RCP program and it works well. But when I exported the program, it posted an error:
The build.properties is as follows:
output.. = bin/
bin.includes = META-INF/,\
.,\
Application.e4xmi,\
plugin.xml,\
com.hpi.hpdm.console.dependencies;bundle-version="1.0.0"
source.. = src/
source.. = src/
jars.compile.order = .
source.com.hpi.hpdm.console.dependencies;bundle-version="1.0.0"/ =
Comment: com.hpi.hpdm.console.dependencies is the plug-in project, com.hpi.hpdm.console is the main project.
I don't know what "\com.hpi.hpdm.console\"1.0.0"\=" does not exise! means. Any clues will be appreciated.
Updated:
The build.properties:
The .product file Contents tab:
When exporting an RCP your .product file must list every plugin (or feature) that is used by the RCP.
If you are using a feature based product configuration:
Open the feature.xml for your code and add all your plugins to the feature (in your case the feature is 'com.hpi.hpdm.console.feature').
If you are using a plugin based product configuration:
Open the .product file editor and switch to the 'Contents' tab. If your main plugin is listed there you should be able to use the 'Add Required' button to update the list. Make sure that all your plugins have been included (along with a lot of standard Eclipse plugins).
I have a project on Grails and angular.js. Also I have tests which runs on karma+jasmin. My directory structure is:
grails-app
assets
images
javascripts
locales
stylesheets
test
On production all my assets are building on bamboo. The problem is that I want to exclude from compiling test folder with all that inside of it and can't do that.
In my Config.groovy I've added
grails.assets.excludes = ["test/**/(*.js|*.json)"]
Also I've tried different patterns for exclude and they all not working.
While building I see that all files inside test folder are being compiled+uglified which I don't want since those are node modules and so on.
Environment:
Mac OSX Mavericks 10.9.4
Compass 1.0.1 (Polaris)
Compass-blueprint (1.0.0)
Sass 3.4.5 (Selective Steve)
sencha app build testing command no error
When I compile app.scss file in the ./resources/sass/ directory, an error happened.
compass compile app.scss
error app.scss (Line 209 of /Users/icese7en/Sites/Demos/Sencha/Practice/WeatherApp/touch/resources/themes/stylesheets/sencha-touch/base/src/_Class.scss: File not found or cannot be read: /Users/icese7en/Sites/Demos/Sencha/Practice/WeatherApp/resources/sass/fonts/pictos/pictos-web.woff)
File not found or cannot be read: /Users/icese7en/Sites/Demos/Sencha/Practice/WeatherApp/resources/sass/fonts/pictos/pictos-web.woff
And then I copy touch/resources/themes/fonts folder to resources/sass/ folder and then this error fixed.
But I doubt why this will happen when in the version 2.3.2 ( sencha touch) I have used compass to compile correctly.
Then there is another error:
compass compile app.scss
error app.scss (Line 42 of /Users/icese7en/Sites/Demos/Sencha/Practice/WeatherApp/touch/resources/themes/stylesheets/sencha-touch/base/src/_ProgressIndicator.scss: Undefined mixin 'experimental'.)
Sass::SyntaxError on line ["42"] of /Users/icese7en/Sites/Demos/Sencha/Practice/WeatherApp/touch/resources/themes/stylesheets/sencha-touch/base/src/_ProgressIndicator.scss: Undefined mixin 'experimental'.
Run with --trace to see the full backtrace
And now I can't fix it.
This is the content of app.scss:
// The following two lines import the default Sencha Touch theme. If you are building
// a new theme, remove them and the add your own CSS on top of the base CSS (which
// is already included in your app.json file).
#import 'sencha-touch/default';
#import 'sencha-touch/default/all';
// Custom code goes here..
// Examples of using the icon mixin:
// #include icon('user');
config.rb:
# Get the directory that this configuration file exists in
dir = File.dirname(__FILE__)
# Load the sencha-touch framework automatically.
load File.join(dir, '..', '..', 'touch', 'resources', 'themes')
# Compass configurations
sass_path = dir
css_path = File.join(dir, "..", "css")
# Require any additional compass plugins here.
images_dir = File.join(dir, "..", "images")
output_style = :compressed
environment = :production
Thanks to #Saki . I pick one sentence from sencha official blog to help other people meet this problem:
With the introduction of Ext JS 4.2 and theme packages, compass watch
no longer understood the structure of themes making “sencha ant sass”
the only option for building Sass. The “sass” build step, however, was
a forced, full rebuild and was many times slower than compass watch.
This is the link: http://www.sencha.com/blog/using-the-new-app-watch-command-in-sencha-cmd-4/
Like most js web apps we have a config.js file that contains global config information about the app, base api urls and such. These values are often different in local development than in production.
I've looked at answers like: Development mode for AngularJS using GruntJS, and also things like grunt-replace for creating an on-the-fly config file.
My issue is that the "development" part varies from developer to developer, we all need a version of the API setup so the base api urls will be different. I'd like to allow each developer to override specific variables in the config in a way that doesn't require them to commit that info to the git repo (I agree that this isn't best practice, everything should be in the repo, but as this is only 1/2 variables for this project I can overlook it)
Any ideas on how to achieve this setup?
You can use grunt-preprocess. I would have production (and dev-server, etc) values in a file, say env.json. You could use grunt to look for an optional file, say overrides.json or developer.json, which would extend/overwrite the values from env.json.
var envFile = require('./env.json');
You can create command line options to grunt with grunt.option, e.g. var env = grunt.option('env') || undefined;, which could be used to turn off overriding.
You can get data from the optional file using fs.existsSync:
var fs = require('fs');
var developerFile;
if (fs.existsSync('./developer.json')) {
developerFile = require('./developer.json');
}
The simplest way to define the grunt-preprocess context would be to use the developer.json file if present, or the env.json file if not:
context: developerFile ? developerFile : envFile;
This requires the developer file to be complete. An alternative is to extend the envFile with options from developerFile if it's present.
In my project, we use different config files (which are basically files with JS object). So every developer has his app/configs/developer/config.js file, which is not comited in the source control, so every developer has his own setup. Project uses link to app/scripts/config.js by default and this file is just a soft link to developers config file. However, there are also app/configs/staging/config.js and app/configs/production/config.js files, which are replaced when using gruntjj to build project. Those configs are just copied to build solution instead of soft linked file.
I hope that makes sense..