I used https://github.com/Swiip/generator-gulp-angular to boilerplate my angularjs application.
I discover bootswatch theme flatly and want to use it and downloaded from [http://bootswatch.com/flatly/][2] two files, _variables.scss and _bootswatch.scss.
I added these two files to my vendor.scss
$icon-font-path: "../../bower_components/bootstrap-sass-official/assets/fonts/bootstrap/";
#import '../../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap';
#import "flatly/variables";
#import "flatly/bootswatch";
and with gulp serve, I build my application and on console it shows me.
project developer$ gulp serve
[21:28:41] Using gulpfile /Volumes/Developer/angularjs/project/gulpfile.js
[21:28:41] Starting 'styles'...
[21:28:42] gulp-inject 2 files into index.scss.
stream.js:94
throw er; // Unhandled stream error in pipe.
^
Error: /Volumes/Developer/angularjs/project/src/app/flatly/_bootswatch.scss:16: error: unbound variable $navbar-default-bg
[1]: https://github.com/Swiip/generator-gulp-angular
[2]: http://bootswatch.com/flatly/
Why unbound variable $navbar-default-bg but the $navbar-default-bg exists in _variables.scss file.
$navbar-default-bg: $brand-primary;
My project structure:
Import the _variables.scss file at the beginning of your custom index.scss:
#import '../../../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/variables';
Another way around could be following these instructions >> https://github.com/Swiip/generator-gulp-angular/issues/379. I haven't tried this, though.
Try importing in this order variables, bootstrap, bootswatch as per
https://github.com/thomaspark/bootswatch/blob/gh-pages/global/build.scss
#import "flatly/variables";
#import '../../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap';
#import "flatly/bootswatch";
The boilerplate attempts to compile all .scss files in the src folder (When it should ignore scss files starting with _).
Moving flaty outside of /src makes it behave eg
#import "../../flatly/variables";
#import '../../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap';
#import "../../flatly/bootswatch";
Related
I have a folder with all my .scss files that I want to compile into .css files using gulp. My gulpfile.js looks like this:
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass',
function (){
return gulp.src('css/modules/*.scss')
.pipe(sass())
.pipe(gulp.dest('css'))
}
);
When I run the gulp sass command, I get the error that a variable ($med-green) is not defined in blocks.scss. It is defined in base.scss, which gets compiled first because it compiled in alphabetical order (and I do end up with a base.css file). The main.scss file is in the css directory and all the other files are in the css/modules directory, so I know the paths are correct. The How do I get the variables to be visible to all the .scss files? What am I missing?
I also have a main.scss file that imports all my .scss files. If I could use that to compile them into 1 .css file (which is the ultimate goal), then that would be great. When I try to do that, I get the error "Error: File not found with singular glob". The main.scss file looks like this, where modules is a subfolder of css, where my main.scss file is.
#import "./modules/_reset.scss";
#import "./modules/_base.scss";
#import "./modules/_header.scss";
#import "./modules/_footer.scss";
#import "./modules/_blocks.scss";
#import "./modules/_interviews.scss";
#import "./modules/_search.scss";
in your case, there is two things to tell >>>
first: to solve your problem, you need to compile only one file (main.scss) that already imports all other scss files
second: scss files starting with ( _ ), get ignored when compiling in gulp-sass,
it is like telling the gulp-sass compiler that these files are for import only.
Try with this:
return gulp.src('css/main.scss')
in your sass task. You don't want individual css files for each of your modules/*.scss files, that is the point of partials and imports - you just want the one, main.scss, which imports them all. Individually, one file will not see the other's variables because each of them do not import all the others.
You want just main.css at the end to include in your html file.
Under my app/assets/stylesheets I created a folder components because I like to create styles specific to each one of my html components. This way in my actual sass file (some_page.scss) I can just do a few imports depending on what I need.
for a visual, here's what the folder structure looks like now:
- app
- assets
- stylesheets
- components
_component1.scss
_component2.scss
application.css
page-specific.scss
right now under components I have
_colors.scss // declaring colors for my app
_other_stuff.scss // other stuff...
usually when doing imports, I import colors first so that I can use them in the rest of my components. But rails is complaining:
Showing /Users/abdulahmad/Desktop/rails/password-service/app/views/layouts/application.html.erb where line #5 raised:
Undefined variable: "$green".
am I supposed to do something special to tell rails that I want my sass compiled in the components folder? or is this error being thrown for another reason?
by the way, here are the contents of my page-specific scss file:
#import 'components/colors';
#import 'components/inputs';
Rename your application.css to application.css.scss
And then application.css.scss file has to be like below.
#import "components/*";
#import "page-specific";
I'm working on a project with webpack to load all my assets.
I load my assets like that in app.js and concat them with ExtractTextPlugin:
import 'foundation-sites/scss/normalize.scss';
import 'foundation-sites/scss/foundation.scss';
import './../sass/app.scss';
I read somewhere that webpack will read each line and one by one compile to CSS and append them to my dist file.
My problem is that I want to access the variables and mixins in foundation from the app.scss, but since they are compile one after the other and appended, it doesn't seem possible to access those mixins and variables. Any one has a solution?
You need to load your dependent .scss files within app.scss.
To do this with webpack. I've configured my app.scss like so:
#import '~foundation-sites/scss/foundation';
#import 'settings';
#include foundation-everything($flex: true);
// the rest of my imports now have access to Foundation mixins
#import 'mycomponent.scss'
The ~ tells sass-loader to tell webpack to look in the modules directory for those files.
When I run sass --watch app.sass:app.css terminal shows that changes have been detected to sass but won't compile to css. I am using Bourbon so all my .scss and .sass files are imported via mixins.
ex.
>>> Sass is watching for changes. Press Ctrl-C to stop.
>>> Change detected to: css/2-modules/top-nav.scss
Make sure the file you are saving with an _filename.scss has been properly imported into the mainfile.scss. if you have not imported the _filename.scss it will detect a change but not compile.
I had the same issue! In my case, it was caused by having several #imports listed like this:
#import 'colors';
#import 'fonts';
#import 'size';
When i changed it to this it all started working again:
#import 'colors', 'fonts', 'size';
Although it should not be needed:
"Sass imports have the same syntax as CSS imports, except that they allow multiple imports to be separated by commas rather than requiring each one to have its own #import." - sass-lang.com/documentation
check for the Config.rb file in your folder.
without it you have to Ctr c every time and pass this command sass --watch scssname:cssname
then You can find your code in css.
Are you sure all of your partials are being imported into app.scss? I had the same issue, only to realize the partial file I was modifying (_custom.scss) wasn't actually being imported by the main.scss.
Create scss file by correct naming (make sure there is underscore "_")
_custom.scss
Import _custom.scss in main.scss (no underscore required)
// main.scss
#import "custom";
Compile the code
sass --watch main.scss main.css
This will compile the code properly.
In your style folder create a file.scss with "_" in the beginning. For example: _fileName.scss
Import it at the start of your principal scss file. For example:
// in **mystyle.scss**
do : **#import "fileName"** (without the underscore )
Run your sass in the terminal. For example:
sass mystyle.scss:mystyle.css --watch
I am using Rails 4, sass-rails 4.0.2 and my application.css.scss file looks like:
#import 'foundation_and_overrides';
#import "font-awesome";
#import "vendors/*";
#import "layout";
#import "modules/*";
However, I am getting an undefined mixin error as follows:
Undefined mixin 'box-shadow'.
(in C:/Rails/austin_residence/app/assets/stylesheets/application.css.scss:4)
The problem is I do not know how to debug this since the error is reporting css lines from the application manifest file instead of the actual #import file containing the error. How do people deal with this?
Start commenting out the #imports in your application file. When you don't see the error anymore, its probably in the file you stopped importing.