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";
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 have the following structure for a web component:
-moduleA
-node_modules
-my-sass-package-a
-node_modules
-my-sass-package-b
_my-partial.scss
package.json
_my-partial.scss
package.json
styles.scss
package.json
In styles.scss I import a SCSS asset from my-sass-package-a:
#import 'my-sass-package-a/my-partial';
In my-sass-package-a/my-partial I import my-sass-package-b:
#import 'my-sass-package-b/my-partial';
sass-loader throws the following error (bur the error is really coming from the blackbox that is node-sass)
SassError: File to import not found or unreadable:
my-sass-package-b/my-partial
The following SOs do not help and are not specifically addressing my context/case:
https://stackoverflow.com/a/35018624/1258525 (this one does not work because they are hard coding the nested depth package, I cannot hard code "my-sass-package-b" into my includePaths
Importing Sass through npm (this one is not working with SASS npm packages but relative SASS assets)
This is issue is one of depth resolution in a nested dependencies.
Is there a way to hook into node-sass resolution and provide hints to look in nested node_module at each resolution root context?
Is there a way to change node-sass options to recursively look for SASS packages in nested node_modules without harding coding my-sass-package-b into my includePaths, again this is not an option for me. (I do not see a node-sass option that help my scenario)
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.
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"
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.