I like to use Codekit for a Compass-Poject with Susy and Breakpoint.
#import "compass";
#import "compass/reset";
#import "susy";
#import "breakpoint";
But there is an error message "File to import not found or unreadable: breakpoint."
Can i use Breakpoint with Codekit2?
Thanks!
Yes, however as Codekit 2 doesn't come bundled with Breakpoint like it does Susy and Compass, it's not as easy as #import "breakpoint";. What you will need to do is, using Codekit 2's Bower integration, download the breakpoint-sass bower package and change your import to #import "../bower_components/breakpoint-sass/stylesheets/breakpoint";.
Why not use #include susy-breakpoint(setting, layout);? It allows you to add settings once instead of using #include breakpoint(your setting); and then #include layout(your layout); on the next line.
I no longer see breakpoint-sass in the Codekit listing of bower packages. I will keep checking.
For those cannot find breakpoint-sass in the CodeKit listing of bower packages, you can do the following.
npm install -g bower
bower install at-import/breakpoint
And then
#import "../bower_components/compass-breakpoint/stylesheets/breakpoint"
inside your main .scss file.
Related
I've started a simple playground project where I only have installed bootstrap (with npm install bootstrap), and the scss compiler package (with node install nose-sass).
I only need the reboot.scss code at the moment.
I would like to import it in my custom scss file and then start writing my bespoke scss code.
My scss file is in /src/scss/style.scss.
And I'm trying to import the bootstrap reboot file, which is /node_modules/bootstrap/scss/bootstrap-reboot.scss.
In my /src/scss/style.scss I wrote:
#import "../../node_modules/bootstrap/scss/bootstrap-reboot";
I need the reboot style from bootstrap. Is there a better way to do it?
Yep, you are correct.
Check this out: this is the documentation on how to do exactly what you mention.
https://getbootstrap.com/docs/4.0/getting-started/theming/#importing
I'm pretty new to Node and i'm trying to use Susy grid but get this error
ERROR in ./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./scss/waterbottle.scss
Module build failed:
#include gallery(1 of 2);
^
No mixin named gallery
I installed Susy and sass-loader with this command
npm install sass-loader --save-dev
and imported Susy in my .scss file like this
#import "~susy/sass/susy";
I've tried changing this path with no luck. I shouldn't have to do that according to their website.
My project file structure
It seems Webpack is locating the Susy file correctly, but somehow won't recognize it's mixins.
You likely installed Susy3 without reading the changelog. Susy3 no longer has a gallery mixin. Check the susy3 intro and documentation for more details. Susy2 will be maintained for the foreseeable future, if you want to stay with that.
How would I import ts-topojson into an Angular2 project so I get Typescript typings? I installed the module using npm and tried to include with a simple import statement but the linter said it couldn't find 'topojson'.
import { Topojson } from 'topojson';
This is my first Angular2 project so I'm very new at this so I could possibly be missing a crucial step.
You could install the package #types/topojson with npm install #types/topojson --save-dev.
Now you can use topojson the following way within a component:
import {topology, feature, ...} from 'topojson';
Or with:
import * as t from '#types/topojson';
Try the following:
Make sure the script is loaded into your scripts in .angular-cli.json.
At the top of a file you want to use the library, add declare let Topojson: any;.
Now you can use Topojson without the TS compiler yelling at you, because it will be implied that it's loaded as a script and made available to you during runtime.
I had integrated sass suport in angular2 seed (https://github.com/mgechev/angular2-seed) and also installed susy form npm(npm install susy --save-dev) but when I imported susy form .scss file it gives following errors
[13:01:16] Starting 'build.html_scss'...
Error in plugin 'sass'
Message:
src/client/css/main.scss
Error: File to import not found or unreadable: ~susy
Parent style sheet: /home/jorin/WebStormWorkSpace/nylndaUI/src/client/css/main.scss
on line 1 of src/client/css/main.scss
>> #import "~susy";
^
[13:01:16] Finished 'build.html_scss' after 218 ms
Anybody who can guide me, what I am doing wrong?
In your sass, correct the path to susy.
It could be
#import "~susy/sass/susy";
The Susy install Guide suggests to use bower and to use a relative path.
bower install susy --save
#import "../bower_components/susy/sass/susy";
But there's no reason you couldn't use the path to your npm-installed susy:
#import "../node_modules/susy/sass/susy";
If you're taking this method, this file is relative to your sass file, so it could be something like
#import "../../../../node_modules/susy/sass/susy";
I don't know how to connect the atom.io editor with susy.
I have tried searching the "atom susy", "atom susy sass" and simmiliar in google, but I have found nothing that help me. (most result were connected with chemistry, so I started to write "atom.io" instead of "atom" and this still has not delivered good results)
Okay... So I have:
Atom (editor) with packages:
sass-autocompile
sass-watch
and npm with:
node-sass
susy
auto-loader
I have tried:
#import "/Ruby22/lib/ruby/gems/2.2.0/gems/susy-2.2.12/sass/susy"
But susy doesn't work.
#import "C://Ruby22/lib/ruby/gems/2.2.0/gems/susy-2.2.12/sass/susy"
But susy still doesn't work.
#import "susy"
Error (not found)
#import "~/susy/sass/susy"
Error (not found)
#import "~/susy-2.2.12/sass/susy"
Error (not found)
Can anyone tell me how to get this to work?
Am I missing config? (if yes: Where to write this config?)
Follow the below steps to make sure whether you installed properly.
Install Compass
gem install compass --pre
Install Susy
gem install susy --pre
Create config.rb in the root of the project folder.
# Add the below contents
require "susy"
project_type = :stand_alone
http_path = "/"
# your sass folder
sass_dir = "sass"
css_dir = "css"
images_dir = "img"
fonts_dir = "fonts"
javascripts_dir = "js"
line_comments = false
preferred_syntax = :scss
output_style = :expanded
relative_assets = true
Create main.scss
// Add the below contents
#import "susy";
body {
background: #000;
}
Watch through compass now - "compass watch"