I have the following directory structure.
Gulpfile.js
--dist
--src
----config.rb
I'm using Gulp from the root project directory to compile my scss, which is what I think is causing issues.
When I compile (creating a sprite sheet, specifically) the URL ends up being /src/other/stuff/here when I need it to just be /other/stuff/here
You can see my config.rb here.
http_path = "/"
css_dir = "src/assets/css"
sass_dir = "src/assets/sass"
images_dir = "src/assets/images"
javascripts_dir = "src/assets/js"
relative_assets = true
output_style = :compressed
line_comments = false
Then in my scss file, I use the following to generate the sheet.
#import "icons/*.png";
#include all-icons-sprites;
It creates it fine, but I just need to remove the src folder. I could do this with a search/replace pipe in Gulp, but I'd rather just have my config file setup properly if that's possible.
What should I look into to make this work how I need it to?
Related
I want to add Compass to my existing project.
I want to maintain my current project structure, which looks like this (simplified):
app/
build/
|-compass/
assets/
|-css/
|-scss
|-js/
|-img/
So I want all my SASS files under \assets\css\scss and I want to output the compiled CSS files to \assets\css.
Running:
compass create --bare --sass-dir "assets\css\scss" --css-dir "assets\css"
creates the Compass config.rb file directly under my root.
However, I want the file to be under \build\compass.
How can I control where Compass creates the config.rb file?
Compass documentation says that declarations in config.rb (e.g. css_dir, sass_dir, etc.) are all relative to the project_path. Where do I define the project_path?
Compass creates the config.rb in the same directory as where you ran the command from. The project path is where the config.rb resides. You're free to place config.rb wherever you like, as long as you adjust the paths for your assets.
This is an example of config.rb:
# Require any additional compass plugins here.
require 'compass/import-once/activate'
# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "../../assets/css"
sass_dir = "../../assets/css/scss"
# You can select your preferred output style here (can be overridden via the command line):
# output_style = :expanded or :nested or :compact or :compressed
output_style = :expanded
# To disable debugging comments that display the original location of your selectors. Uncomment:
line_comments = false
# Enable source map
sourcemap = true
And with this config.rb settings, your project folder should be like (as you wrote):
MyFolder
├ app
├ build
│ └ compass
│ └ config.rb
└ assets
├ css/
│ └ scss/
├ js
└ img
If you don't have a config.rb, simply create a new file "config.rb" and copy/paste inside the configuration i wrote.
Open your terminal, enter in MyFolder/build/compass and then start your compass command, like: compass watch
Remember
You have to execute your compass command in the same folder where is the config.rb file. So in this case in MyFolder/build/compass. Otherwise compass doesn't work.
I don't see why you'd structure a project like this...I mean why not put the scss in build and then everything in assets can be deployed for production?
So:
1.
Running (from "app" directory)
compass create build --http-pat="../" --sass-dir="compass/scss" --css-dir="../assets/css" --javascripts-dir="../assets/js" --images-dir="../assets/img"
will create the project folders and files as such:
app
|-- build
| |--config.rb
| |-- compass
| |-- scss
|-- assets
| |-- css
| |-- img
| |-- js
Again, from within app directory, running:
compass config "build/config.rb" --http-pat="../" --sass-dir="compass/scss" --css-dir="../assets/css" --javascripts-dir="../assets/js" --images-dir="../assets/img"
will simply create the build directory and place a configuration file with these values in it.
I'm using CodeIgniter 3.0 and Foundation 5. I also recently installed SASS/SCSS and Compass to make working with Foundation easier.
I'm wondering is it possible to use them together? The foundation CLI builds a new directory with all of the content, but I have an existing CI project I'd like to integrate it with.
I resolved this by adding an empty compass project into CodeIgniter, then copied the Foundation scss and bower_components directories into my source directory. Then adding add_import_path src/bower_components/foundation/scss to the config.rb to allow importing of the Foundation SCSS.
# Require any additional compass plugins here.
add_import_path "src/bower_components/foundation/scss"
# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "src/css"
sass_dir = "src/sass"
images_dir = "images"
javascripts_dir = "src/js"
I have a mixins file, which I constantly develop. I use it in every project, but sometimes I need to go back and I not always remember to copy the new file, so it causes confusion (plus, it's really counterproductive, having to copy a single file to each project).
What I thought today, that it would be great if I could import a scss file either from remote hos (a dropbox url) or an absolute path. I tried using this:
#import 'F:/XAMPP/htdocs/RATIUG/ratiug/reset';
and
#import 'http://myDropboxLink';
but neither worked. Can I solve this somehow?
When Sass encounters #import with a protocol, it assumed that is a CSS directive. So, you have to precise a shared folder.
Solution with Sass
If you uses Sass in standalone mode, you can add the --load-path argument to precise the shared folder:
$ sass --load-path F:/XAMPP/htdocs/RATIUG styles.scss
Now, you can call your reset mixin:
#import "ratiug/reset";
Solution with Compass
Simply add the shared path in your config.rb with add_import_path:
sass_dir = "sass"
css_dir = "css"
add_import_path File.expand_path("F:/XAMPP/htdocs/RATIUG")
Each bit of my project is a separate component, with its own hierarchy. To include them in my file, I just need to include the app.jsand inject it to whatever I want. So for each component, I have a separate config.rb file to run the compass for it.
Now, say I have the following hierarchy:
/app
config.rb
/assets
/sass
_functions.scss
/css
/components
/login
/assets
/sass
app.scss
/css
config.rb
Say I want to #import _functions.scss into app.scss. Right now, I have to use the relative path , and basically keep on going back the root folder, and then go into the folder for the file.
Is there a way to define the path inside the login's config.rb file?
You can uses the add_import_path directive in your config.rbfile, like I do in a project to access vendors mixins:
add_import_path "#{File.expand_path(sass_dir)}/vendors";
In your case, it would be:
add_import_path "#{File.expand_path('./assets/sass')}";
I'm trying to set up a Compass project. Everything seem to work when I compile manually. However, when I'm using a File Watcher it saves it in the same directory as the SCSS file.
I just want the File Watcher to use my configuration file. Preferably on every project in the future.
Right: Structure when compiled manually
Wrong: Structure when compiled with the File Watcher
config.rb
css_dir = "css"
sass_dir = "css/sass"
output_style = :compressed
File Watcher
How can I make the File Watcher to respect the configuration?
Solved!
Deleted the SCSS File Watcher
Manually added a Compass File Watcher
Set arguments to: compile $ProjectFileDir$