yeoman / sass import a file - compass-sass

I'm using yeoman and i want to import a native css from a bower component.
In my main.scss i'm doing the following :
#import "../components/select2/select2.css";
This works fine until i'm building my project.
I'm having an issue saying that my imported file is not available.
Did you faced the same issue ? How did you fixed ?
I'm running yeoman 1.0.0-beta.3

Related

include Compass in compiling SASS in Ionic framework?

Does anybody knows how to include compass in an Ionic 2 project?
I have tried to import compass-sass, but I can't find a path to set the compass preprocessing in my styles.
As pointed by this stackoverflow answer use this Compass lib
How i implemented in my Ionic 2+ project.
Installed via npm - npm install compass-sass-mixins
Imported to my project by adding #import "../../node_modules/compass-sass-mixins/lib/compass"; in file app.scss
Then run ionic serve
Hope this helps to implement useful mixins

Meaning of ~ in import of scss files

I have a npm library that I use for styling which uses the following syntax to import scss files. I am not sure what this means and could not find any documentation online. I use grunt with webpack during my build process.
#import '~bourbon/app/assets/stylesheets/bourbon';
#import '~bourbon-neat';
From documentation on a sass-loader#imports project,
webpack provides an advanced mechanism to resolve files. The
sass-loader uses node-sass' custom importer feature to pass all
queries to the webpack resolving engine. Thus you can import your Sass
modules from node_modules. Just prepend them with a ~ to tell webpack
that this is not a relative import
So if you have a file named foo.css and a module foo then you would use ~ if you want to include the module.

Using Foundation SCSS with Yeoman angular-generator

I have installed Foundation via Bower, and I can use the default foundation.css fine by setting it as main in bower.json, and then it's included in the html automatically. So, now I want to theme my Foundation stuff, but I'm not sure how to do the scss stuff with compass and grunt and all that. How do I accomplish this?
It would be nice to be able to just have foundation work with compass and all that.
Help would be greatly appreciated!
EDIT:
I added this to my bower.json in the foundation package:
"main": [
"scss/foundation.scss"
],
And then grunt adds the bower scss import and I manually added my settings files. I have the following in main.scss:
#import "foundation/settings";
// bower:scss
#import "foundation/scss/foundation.scss";
// endbower
I am importing the settings file and the foundation.scss file and I get no errors, but I don't see any of the styles on the screen at all. Any ideas?
This was related to the bugs with the new version of Sass and Foundation. To fix I had to do:
bower uninstall foundation
Then manually go into bower.json in the root of my project and tell it I wanted Foundation 5.4.3 like so:
"foundation": "zurb/bower-foundation#~5.4.3"
Then just do a bower cache clean and a bower install and it should work again.

LiveReload + Compass error- Syntax error: File to import not found or unreadable

I have windows 7 and I've installed ruby, sass, compass, and LiveReload 0.9.2. When I make an update to my .scss files everything works fine until I try to import compass. I'm receiving this error.
Syntax error: File to import not found or unreadable
I've created a project in compass and have LiveReload watching the same folder.
When I run compass from the command line to watch files it works perfectly. It seems like LiveReload isn't finding the appropriate file to import. I've tried modifying the 'config.rb' file but still received the same error.
Is this a bug with the LiveReload 0.9.2? Or am i just being a numbskull?
Have you trying updating ?
Also, there are a few stuffs you need to be sure in order to compile compass.
Have you checked -> http://feedback.livereload.com/knowledgebase/articles/86203-sass-compass ?
Please, verify the above linked and let me know in which state are you.

Compass / scout import

I just started with compass with scout for the GUI.
I'm trying to follow along with a demo and am a bit confused about #import. When I do
#import "compass" everything compiles fine. However when I try to import #import "scss/normalize" which is in compass/scss/_normalize.scss i get
Change detected at 14:59:07 to: screen.scss
error screen.scss (Line 2: Invalid CSS after "#import "compass"": expected selector or at-rule, was "#import "scss/n...")
overwrite screen.css
What exactly is #import "compass" doing? what file is that importing? Or is a folder from where I installed scout in program files?
figured it out. you need a ; after each import statement. duh.

Resources