Using Meteor + Stylus, how do you import a file in another folder starting from the root?
Given:
/css/colors.styl
/home/home.styl
I know I can use #import '../css/colors' but it gets messier the deeper it goes. Is there a way to do something like #import '/css/colors'?
Starting in meteor 1.2, you can import a .styl file relative to your application's root directory with the following syntax:
#import '{}/client/imports/colors.styl'
See the package documentation for more details. Also note:
The package processes all .styl files, treating .styl as entry points and all files with extension .import.styl or a file in under an imports folder as an import.
So putting your imports under a directory with imports in the name is a good idea.
Related
When compiling scss from one folder to another folder, imported paths do not compile correctly. I assume I'm just doing something wrong. I haven't found any instructions for doing this (assuming its possible).
I have a "Styles" folder that contains my app.scss. I then compile it to wwwroot/css/app.css.
Solution Structure
Import in app.scss
Import in compiled app.css
Import in compiled app.css as read by browser
It should be under wwwroot/css/open-iconic/font/css/open-iconic-bootstrap.min.css instead of...
Compiler Config Defaults
Compiler Config
I rebooted my machine and now the path is compiling appropriately.
I have a folder with Less files, split in parts to have a cleaner workspace. But I want them to be compiled by PhpStorm to 1 file (styles.css in a css folder). I installed lessc and it compiles the files separate. See picture 1
As I said I would like to have all files combined into css/styles.css But I don't get this configured right. My configuration is as followed:
I hope someone can explain what arguments I could use.
When Track only root files option is enabled in Less file watcher settings, file watcher produces a single .css file with name matching your "main" .less file (the one that imports all your "partials") that includes the merged content of all your .less files. No individual .css files for partials are created
I've set up a new Jekyll site to test the Neat 2.0 grid. However, as I run Jekyll Serve I've noticed that nothing from my main.scss file doesn't compile into my main.css file:(
Folder set up
Config.yml
sass:
sass_dir: _scss
What's happening here and how can I get my main.scss file to compile?
The sass_dir won't be processed by the sass converter directly, is only meant to contain partials:
sass_dir becomes the load path for Sass imports, nothing more. This
means that Jekyll does not know about these files directly (..)
This folder should only contain imports.
To have your sass file converted, start the file with two lines of triple dashes:
---
---
// sass content
The output file will be located in the directory where that file is placed.
You can put it in css/main.scss and Jekyll will generate css/main.css.
I am playing with this as well, but I'm a beginner, so take my advice with a pinch of salt.
However, my setup is working and compiling all scss changes when I'm running "jekyll serve --watch" with my _sass folder specified in config.yml as:
sass:
sass_dir: _sass
My _sass folder itself contains a couple of _scss files, which I use for styling, but the important thing, I think, is that my jekyll CSS folder contains only imports in only one file named main.scss, like this:
---
# Front matter comment to ensure Jekyll properly reads the file
---
#import
"layout",
"grids",
"etc"
Hopefully this not-very-techinical explaination is of use either to you, or to someone googling how to make jekyll compile/process and watch for changes in .sccs files.
I've got a Meteor project with the following file structure:
.meteor
client
dashboard
dashboard.scss
client.scss
My basic sass file is client.scss that resides in client folder.
If I define $flat-button in client.scss. Then I cannot use it in dashboard.css without adding import '../client';. However when I do this in multiple files this causes duplicate entries in the unified css file. If I don't import it then Meteor reports errors due to not finding the variable.
Should I add settings to the sass compiler to get this working?
If you're using the fourseven:scss package to compile the Sass in your Meteor project, you simply need to prefix the filenames of your imported .scss files with an underscore, which is the standard method of naming a partial stylesheet with Sass.
In your case, your folder and file structure should be changed to:
.meteor
client
dashboard
_dashboard.scss
client.scss
And then you should be able to use an #import statement to include _dashboard.scss in client.scss like so:
#import 'dashboard'
If for some reason you don't want to rename your files that way, you can also use the .scssimport extension for the same result.
Hope that helps!
I decided to use the Sass version of Foundation4 as the CSS one is virtually impossible to edit efficiently now.
I followed the instructions here: http://foundation.zurb.com/docs/sass.html
These advised me to install the gem (no problem) then install compass then create a project, which I did in wwwroot.
All good so far. It then goes on to advise me to "download the files from Github (grab the scss/ and js/ directories) and put them into your project directory"
Now why in the name of a fish on a bicycle would the instructions advise me to do this when the previous step on the command line (compass create -r zurb-foundation --using foundation) creates a folder already in the root directory for my project - albeit named differently - that contain similar if not identical files? There's already a "javascripts" folder with "foundation" and "vendor" subfolders that contain largely the same files - although some are different sizes.
Am I missing something? The included "index.html" file reference the "javascripts" folder so why am I meant to be including "js" from the github? This is very confusing when you're new to the technology!
After following the installation instructions I now have "foundation.scss" and "app.scss" files which seem to be largely the same apart from one (app.scss) has lots commented out. Which one am I meant to use?
It seems to me that the instructions are basically out of date. It appears that I don't need "js" from github but I do need "scss". The contents of this scss folder look like they need to go into the "sass" folder created when the project is made and the "foundation.scss" file can be deleted as "app.scss" is a copy of it.
I have no idea where the base "app.scss" file is hoping to "#import foundation" from as there is no "foundation" folder created on installation/creation of project. Maybe I'm missing something but it's all very confusing. Could someone please clarify what I need to start with and what I can delete/ignore?
When you install the gem, all the proper Foundation files are installed for you in the gem cache. Compass will pull all the F4 SCSS files into your project via the #import directive from foundation.scss.
The project docs in the Github repo show the latest Compass instructions for building your F4 project.
https://github.com/zurb/foundation/blob/master/docs/sass.html.erb
It sounds like you are mixing the Standalone instructions into the Compass ones.
If you have run this:
[sudo] gem install compass
cd path/to/where-you-want-your-project
run compass create <project-name> -r zurb-foundation --using foundation
You don't need Github or the Standalone instructions.
The steps below outline the manual steps of building an F4 project. I think you're stuck on STEP 4, so focus on that part.
STEP 1:
Download for easy access these two archives:
Foundation Vanilla:
http://foundation.zurb.com/files/foundation-4.1.6.zip
Foundation Master:
https://github.com/zurb/foundation/archive/master.zip
CD into your www root directory:
STEP 2:
Create this file:
/config.rb
require 'zurb-foundation'
http_path = "/"
css_dir = "css"
sass_dir = "scss"
images_dir = "img"
javascripts_dir = "js"
output_style = :expanded
relative_assets = true
line_comments = true
Switch output_style = :compact or :compressed and line_comments = false for Production (when going live).
STEP 3:
Copy/Move index.html from Foundation Vanilla into your root www directory.
Edit line 11 and change foundation.css to app.css in the style tag.
STEP 4:
Create this directory and file:
/scss/
Create app.scss - This is your site/app stylesheet and we'll import Normalize and F4 in it.
Copy this into it:
// Global Foundation Settings
// #import "settings";
// Comment out this import if you don't want to use normalize
#import "normalize";
// Comment out this import if you are customizing you imports below
#import "foundation";
// Your own SCSS here...
If you want to override some F4 SaSS variables you will need the _settings.scss file. For now I would skip this step and leave it commented out until you are more familiar with F4.
STEP 5:
Create this directory (files automatically written here):
/css/
app.css - will be written here from /scss/app.scss by Compass. Normalize and all the F4 CSS will be inside it, plus any of your own CSS you've added.
This happens automatically, you don't need to do anything except have the required gems installed and your Compass config file from STEP 2.
STEP 6:
Create this directory and copy/move these files into it:
/js/
Copy/Move /js/foundation.min.js from the Foundation Vanilla download here.
If you need your own app.js create/place it here and link to it last in your footer.
/js/vendor/
Copy/Move /js/vendor/custom.modernizr.js from the Foundation Vanilla download into here.
Copy/Move /js/vendor/zepto.js and /js/vendor/jquery.js from the Foundation Vanilla download here.
Later, when you feel more comfortable, you can cherry pick individual Foundation JS files from Foundation Master and concatenate them into a smaller lib here as foundation.min.js.
That should do it.
Check out this file in my www repo, as it shows a working F4 setup:
https://github.com/jhauraw/jhaurawachsman.com/blob/master/_layouts/default.html
You can also poke around there for how to integrate Grunt.js for automated build of the SCSS and JS with concatenation and minification:
https://github.com/jhauraw/jhaurawachsman.com/blob/master/Gruntfile.js
Without being as adept as #jhauraw, I did notice something else.
I installed FOundation through the Compass app. Being a novice with Compass, I too was looking for the "foundation" folder that would contain all the various Foundation SCSS files. And when I looked at the _settings.scss file that was present, it appeared that everything was commented out. What I know understand (still as a novice towards Compass) is that the "foundation" file lives within a resource library within Compass. When needed, these files are imported when generating the CSS file. The _settings.scss file with all the commented out fields is an override file. So if you remove the comments for a particular variable or mixin, it will override the originals hidden in the Compass library. The compiled CSS seems to contain everything that's needed.