So, I'm trying to set up my wp theme for use with sass.
I've renamed style.css to style.scss and put it in a folder called 'sass'.
Then I made a file called config.rb. In it I wrote
/* config.rb in the theme's root. */
css_dir = "/"
sass_dir = "sass"
output_style = :compressed
I then try to use compas.app to watch the folder (that is on a FTP server, mounted in Finder). I choose the root folder of the theme and press ok. After two seconds I get an error:
'(RegexpError) target of repeat operator is not specified: /* config.rb in the theme's root. */
org/jruby/RubyKernel.java:1112:in eval'
/Applications/compass.app/Contents/Resources/lib/ruby/compass_0.12/compass-0.12.2/lib/compass/configuration/serialization.rb:24:inparse_string'
/Applications/compass.app/Contents/Resources/lib/ruby/compass_0.12/compass-0.12.2/lib/compass/configuration/serialization.rb:15:in _parse'
org/jruby/RubyIO.java:1139:inopen'
org/jruby/RubyKernel.java:296:in open'
file:/Applications/compass.app/Contents/Resources/Java/lib/java/jruby-complete.jar!/META-INF/jruby.home/lib/ruby/1.8/open-uri.rb:32:inopen'
/Applications/compass.app/Contents/Resources/lib/ruby/compass_0.12/compass-0.12.2/lib/compass/configuration/serialization.rb:14:in _parse'
/Applications/compass.app/Contents/Resources/lib/ruby/compass_0.12/compass-0.12.2/lib/compass/configuration/file_data.rb:7:innew_from_file'
/Applications/compass.app/Contents/Resources/lib/ruby/compass_0.12/compass-0.12.2/lib/compass/configuration/inheritance.rb:204:in with_defaults'
/Applications/compass.app/Contents/Resources/lib/ruby/compass_0.12/compass-0.12.2/lib/compass/configuration/file_data.rb:6:innew_from_file'
/Applications/compass.app/Contents/Resources/lib/ruby/compass_0.12/compass-0.12.2/lib/compass/configuration/helpers.rb:42:in configuration_for'
/Applications/compass.app/Contents/Resources/lib/ruby/compass_0.12/compass-0.12.2/lib/compass/configuration/helpers.rb:97:inadd_project_configuration'
/Applications/compass.app/Contents/Resources/lib/ruby/compass_0.12/compass-0.12.2/lib/compass/commands/project_base.rb:31:in add_project_configuration'
/Applications/compass.app/Contents/Resources/lib/ruby/compass_0.12/compass-0.12.2/lib/compass/commands/project_base.rb:25:inconfigure!'
/Applications/compass.app/Contents/Resources/lib/ruby/compass_0.12/compass-0.12.2/lib/compass/commands/project_base.rb:15:in initialize'
/Applications/compass.app/Contents/Resources/lib/ruby/compass_0.12/compass-0.12.2/lib/compass/commands/update_project.rb:37:ininitialize'
file:/Applications/compass.app/Contents/Resources/Java/compass-app.jar!/ui/tray.rb:417:in watch'
file:/Applications/compass.app/Contents/Resources/Java/compass-app.jar!/app.rb:207:intry'
file:/Applications/compass.app/Contents/Resources/Java/compass-app.jar!/ui/tray.rb:412:in watch'
file:/Applications/compass.app/Contents/Resources/Java/compass-app.jar!/ui/tray.rb:153:inopen_dir_handler'
file:/Applications/compass.app/Contents/Resources/Java/compass-app.jar!/ui/tray.rb:71:in run'
file:/Applications/compass.app/Contents/Resources/Java/compass-app.jar!/main.rb:115:inrun_tray'
file:/Applications/compass.app/Contents/Resources/Java/compass-app.jar!/main.rb:131:in (root)'
org/jruby/RubyKernel.java:1062:inrequire'
file:/Applications/compass.app/Contents/Resources/Java/compass-app.jar!/main.rb:1:in `(root)''
You'll have to debug it.
First, download your theme to a local drive and run compass compile on it.
Then run Compass.App on it.
Then run compass watch on the remote folder.
On which step does the problem occur?
Related
When I run the command yarn build, some files are created in the public/build directory, generated files get a new filename containing a random hash string :
For only files themes/light and theme/dark I need to remove automatically the random hash string when I run the yarn build, I want to keep the original filename. I mean, currently the command generate theses files :
public/build/themes/light.3ac94fb2.css
public/build/themes/dark.064ff2f6.css
And instead, I want to have :
public/build/themes/light.css
public/build/themes/dark.css
Is it possible to do that automatically ?
If you don't mind having the files twice, one with the hash, one without, then the copyFiles plugin is probably the way to go:
This work adding, in your Encore configuration in webpack.config.js something like:
Encore
// Your usual config comes here
.copyFiles([
{
from: './assets/themes/light.css',
// or wherever the file lives in the assets folder
to: 'public/build/themes/light.css'
},{
from: './assets/themes/dark.css',
// or wherever the file lives in the assets folder
to: 'public/build/themes/dark.css'
}
])
;
Notice: untested – find more explanation here: https://symfonycasts.com/screencast/webpack-encore/copy-files
There is also a configureFilenames function, but I am not sure you'll be able to fit conditionals in it.
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 trying to configure my Sencha Touch 2 application build process such that linked fonts have correct path in the CSS.
I have added fonts_path to MyApp/resources/sass/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")
fonts_path = File.join(dir, "..", "fonts")
# Require any additional compass plugins here.
images_dir = File.join(dir, "..", "images")
output_style = :compressed
environment = :production
which should change the fonts path used in the SCSS:
#include icon-font('Pictos', font-files('pictos-web.svg', 'pictos-web.eot'));
but this still compiles to
#font-face{font-family:"Pictos";src:url('/stylesheets/fonts/pictos-web.svg') format('svg'),url('/stylesheets/fonts/pictos-web.eot') format('embedded-opentype')}
So the fonts path used in is the CSS still is /stylesheets/fonts/, and I don't know why.
I have tried to find the config.rb used by calling sencha -d app build production, but this does not give me any more details as to the config file used:
[INF] -compass-compile-sass-dir:
ruby 2.2.3p173 (2015-08-18 revision 51636) [x64-mingw32]
[DBG] exit code was : 0
[DBG] exit code was : 0
[DBG] ruby detected, checking for version in : ruby 2.2.3p173 (2015-08-18 revision 51636) [x64-mingw32]
[DBG] setting GEM_HOME to C:\Users\urban\bin\Sencha\Cmd\6.0.1.76\extensions\sencha-compass\gems
[INF] executing compass using system installed ruby runtime
[DBG] executing compass : ruby C:\Users\urban\bin\Sencha\Cmd\6.0.1.76\extensions\sencha-compass\gems\bin\compass compile --force --trace
identical ../css/app.css
[DBG] exit code was : 0
Now I am not sure that I edited the correct config.rb, there are quite some:
MyApp/resources/sass/config.rb
MyApp/touch/packages/sencha-touch-grid/examples/grid/resources/sass/config.rb
MyApp/touch/packages/sencha-touch-grid/examples/summarygrid/resources/sass/config.rb
MyApp/.backup/MyApp/2.3.1.410/resources/sass/config.rb
MyApp/touch/resources/sass/config-debug.rb
MyApp/touch/resources/sass/config.rb
MyApp/touch/resources/themes/vendor/config/compass-recipes/config.rb
Which one is it or is it neither?
For local HTML/Sass/Css developement we use libsass (via Grunt) to compile our Sass files to Css. The Css background-image URL's are root relative.
Sass
$dir-img: /img;
.header {
background-image: url(#{$dir-img}/header.jpg);
}
We'd like to change the URL to use a CDN when compiling for production server:
background-image: url(http://media.website.com/img/header.jpg);
Is there some solution to pass-in a command-line argument TO Sass so Sass can use a Sass #IF to switch the root-relative URL's to hard-coded CDN like URL's. Something like:
Command-line:
grunt sass:dist --cdnurl="http://media.website.com/img/"
Sass
Then Sass checks if the command-line argument was given:
#if using CDN {
$dir-img: cdnurl;
#else {
$dir-img: /img;
}
And then all IMG url's would use the CDN URL.
I couldn't find anything on libass command-line options to pass said vars. to Sass.
But eventually came up with a working version of my own! Have Grunt write a Sass config partial.
Pretty simple actually if your already using Grunt and Sass. We'd already had NodeJS and Grunt-cli installed on our staging (test) -server.
Sass setup
In Sass we already used a (larger) Sass config file which holds a few vars like:
_config.scss
$dir-font: '/assets/assets/fonts';
$dir-htc: '/assets/htc';
$dir-img: '/assets/images';
This config file holds much more config settings but I've updated these vars. in this config file to:
#import "_sourcepaths";
$dir-font: '/assets/fonts' !default;
$dir-htc: '/assets/htc' !default;
$dir-img: '/assets/images' !default;
Note the #import partial of _sourcepaths.scss. This smaller partial file is generated by Grunt. The Sass !default; is used as fallback vars. or you might not even need these anymore (are overwritten by Grunt).
Grunt setup
On the Grunt side I added a custom task that is only executed on our staging (or test) -server (for example during a build process). On our local machine we keep using root-relative paths for local development.
Grunt custom target configuration
module.exports = function(grunt) {
grunt.initConfig({
writeSassConfig: {
options: {
scss: './assets/scss/partials/_sourcepaths.scss',
dirFont: '/assets/fonts',
dirHtc: '/assets/htc',
dirImg: '/assets/images'
},
cdn: {
//pathprefix: 'http://cdn.website.com'
pathprefix: grunt.option('pathprefix') || ''
}
}
}
});
Example cdn Grunt target with hardcoded (http://cdn.website.com) or dynamic (via grunt.option command-line argument) pathprefix. See below at 'Running the Grunt task' how to run this. It also has a fallback || '' to empty, which actually resets the paths in the Sass config file to root-relative URL's.
Grunt custom task
Then the required Grunt task (for configuration above). This Grunt task writes the Sass partial to disk.
grunt.registerMultiTask('writeSassConfig', 'Write Sass config file to change source paths', function(){
grunt.config.requires(
this.name + '.options.scss',
this.name + '.options.dirFont',
this.name + '.options.dirHtc',
this.name + '.options.dirImg',
);
// Create Sass vars
var _thisOptions = this.options(),
pathprefix = this.data.pathprefix || '',
contents = "// Generated by Grunt for dynamic paths like a CDN server\n";
contents += "$dir-font: '" + pathprefix + _thisOptions.dirFont + "';\n";
contents += "$dir-htc: '" + pathprefix + _thisOptions.dirHtc + "';\n";
contents += "$dir-img: '" + pathprefix + _thisOptions.dirImg + "';\n";
grunt.file.write(_thisOptions.scss, contents);
});
Grunt aliased task
This creates a custom chained workflow of two tasks running after each other. The sass:dist is a regular Grunt task and target via grunt-sass (libsass) plugin. You are probably already using this.
grunt.registerTask('build-sasscdn', 'Generate Sass config for different Sass paths like a CDN server path', function(){
grunt.task.run(
'writeSassConfig',
'sass:dist'
);
});
Running the custom Grunt task
The pathprefix var., via grunt.option('pathprefix'), in above Grunt custom target is provided via grunt command-line argument:
grunt build-sasscdn --pathprefix="https://cdn.website.com"
This domainname can be changed by the staging (test) -server server-side-scripting language (like .NET/PHP/Ruby). The Sass config file _sourcepaths.scss is now changed by Grunt to:
_sourcepaths.scss
$dir-font: 'https://cdn.website.com/assets/fonts';
$dir-htc: 'https://cdn.website.com/assets/htc';
$dir-img: 'https://cdn.website.com/assets/images';
Remember that _sourcepaths.scss is imported by Sass. The Grunt alias task then runs the usual sass:dist target, which just re-compiles the Sass (on the staging / test server) WITH updated hard-coded CDN domain name paths in the Css.
I've been trying to get django-pipeline setup so that I can compile and concat my assets. I would also like to remove the compiled css files from my repository to avoid merge conflicts in pull requests.
I've been trying to get django-pipeline to compile the files as part of the deploy process but can't figure this out. I use SASS to write my CSS. My pipeline settings look like this:
STATICFILES_STORAGE = 'pipeline.storage.PipelineCachedStorage'
PIPELINE_CSS = {
'main': {
'source_filenames': (
'sass/blah.scss',
'sass/main.scss',
),
'output_filename': 'css/main.css',
'extra_context': {
'media': 'screen',
},
},
}
PIPELINE_COMPILERS = (
'pipeline.compilers.sass.SASSCompiler',
)
This works great locally, and generates .css files in my /sass folder, which are then combined to make the main.css file. If I check those CSS files into my git repository and push to Heroku, it also works fine. However, if I ignore them, which I would like to do so that I'm not committing compiled files, then django-pipeline can't find the files to combine. I'm not sure how I can get the sass compilation working on Heroku and I can't find anything about it.
I can provide more information about my setup if needed, hopefully somebody knows something about this!
OK, here's how I got this working using Compass to compile my SASS files.
Use multiple Heroku buildpacks - Heroku Buildpack Multi
Put the following in your .buildpacks file
https://github.com/heroku/heroku-buildpack-ruby.git
https://github.com/heroku/heroku-buildpack-nodejs
https://github.com/heroku/heroku-buildpack-python.git
Create a Gemfile with compass and any other requirements you have. Here's mine:
source 'https://rubygems.org'
ruby '1.9.3'
gem 'bootstrap-sass'
gem 'compass'
Create a config.rb file. Here's mine. As you can see it, requires the bootstrap-sass that I included in my Gemfile:
# Require any additional compass plugins here.
require 'bootstrap-sass'
# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "app_folder/static/css"
sass_dir = "app_folder/static/sass"
images_dir = "app_folder/static/images"
output_style = :compact
more details on config.rb can be found here
Install node packages (django-pipeline wants yuglify). You'll need a package.json file:
{
"dependencies": {
"yuglify": "0.1.4"
},
"engines": {
"node": "0.10.x",
"npm": "1.3.x"
},
"repository": {
"type": "git",
"url": "your repo url"
}
}
almost ready...
when Heroku runs the ruby buildpack, it will look for a rake task called assets:precompile. So now you'll need to add a Rakefile with the following:
namespace 'assets' do
desc 'Updates the stylesheets generated by Sass/Compass'
task :precompile do
print %x(compass compile --time)
end
end
this will put compile your stylesheets. You need to make sure you set the output (back in config.rb) to the place that django-pipeline is looking for CSS files (shown in the original question).
You should get rid of this part in the original question as django-pipeline isn't compiling your SASS for you:
PIPELINE_COMPILERS = (
'pipeline.compilers.sass.SASSCompiler',
)
That should be it! Deploys should just work now, and it didn't really add a significant amount of time to my deploy process.
All in all, it amounts to a lot of setup, but for me it was well worth it as I no longer have to commit compiled files into the repository, which was causing a lot of merge conflicts when working with branches and pull requests.
I would like to figure out how to do this using only two buildpacks (obviously only one would be ideal but I don't know if it's possible). The problem is trying to find binary paths so that pipeline can do it's thing when it doesn't find the defaults. I'm not sure if the reason I can't do this is because of how Heroku is installing things, or because there is a bug in django-pipeline, but right now this is good enough for me.
If you try this and it doesn't work for you, let me know, if I missed something I'm happy to make updates.
I don't want to take away from your excellent solution, but I tried this today and found a few differences that made things simpler for me - likely due to updates in django-pipeline and/or Heroku. My full solution is below, in case anyone else comes looking.
Add the 3 buildpacks to Heroku:
heroku buildpacks:set https://github.com/heroku/heroku-buildpack-ruby.git
heroku buildpacks:add https://github.com/heroku/heroku-buildpack-nodejs
heroku buildpacks:add https://github.com/heroku/heroku-buildpack-python.git
Add django-pipeline and django-pipeline-compass to requirements.txt:
django-pipeline==1.5.2
django-pipeline-compass==0.1.5
Create a Gemfile to install Sass:
source 'https://rubygems.org'
ruby '2.1.5'
gem 'bootstrap-sass'
Create a package.json file to install Yuglify:
{
"dependencies": {
"yuglify": "0.1.4"
},
"engines": {
"node": "0.10.x",
"npm": "1.4.x"
}
}
I did not need a Rakefile or config.rb.
For reference, here are relevant settings from my settings.py:
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, '_generated_media')
STATICFILES_STORAGE = 'pipeline.storage.PipelineCachedStorage'
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'static'),
)
STATICFILES_FINDERS = (
'django.contrib.staticfiles.finders.FileSystemFinder',
'django.contrib.staticfiles.finders.AppDirectoriesFinder',
'pipeline.finders.PipelineFinder',
)
PIPELINE_COMPILERS = (
'pipeline_compass.compiler.CompassCompiler',
)
PIPELINE_YUGLIFY_BINARY = os.path.join(BASE_DIR, 'node_modules', '.bin', 'yuglify')
And I also had to add this entry to urls.py:
url(r'^static/(?P<path>.*)$', serve, kwargs={'document_root': settings.STATIC_ROOT})
Hope it helps someone!
You may need to set PIPELINE_SASS_BINARY so that django-pipeline can find your SASS compiler.
You can use the libsass compiler for django-pipeline that uses Sass packaged as a Python package:
pip install libsasscompiler
Update your config:
PIPELINE['COMPILERS'] = (
'libsasscompiler.LibSassCompiler',
)
The default Yuglify compressor is also a problem on Heroku, which you can temporarily overcome by disabling it. This is my config for enabling Sass on Django for example:
PIPELINE = {
'COMPILERS': (
'libsasscompiler.LibSassCompiler',
),
'STYLESHEETS': {
'main': {
'source_filenames': (
'styles/main.scss',
),
'output_filename': 'css/main.css'
},
},
# disable the default Yuglify compressor not available on Heroku
'CSS_COMPRESSOR': 'pipeline.compressors.NoopCompressor',
'JS_COMPRESSOR': 'pipeline.compressors.NoopCompressor'
}
The longer-term solution would be to move towards a JS-only build toolchain (as most projects are doing). Rails integrates pretty nicely with Webpack for example and is maintained by the same team. Until that happens in Django (if ever) and trickles into the Heroku Python builpack, you can use Heroku's multiple buildpacks and add an official Node buildpack step that runs npm install; npm run build for you.