Import errors with bootstrap-sass-official/other sass files.

sumeetattree commented 9 years ago

The compiler is not playing nice with other sass files. When trying to import sass files from within app/styles or bower_components.

Here's the app.scss

@import "bower_components/bootstrap-sass-official/assets/stylesheets/_bootstrap";

@import "variables";
@import "mixins";
@import "base";
@import "dialer";

Error 1:

directory tmp/compass_compiler-tmp_cache_dir-ZxE1PHwf.tmp/assets
    error app/styles/app.scss (Line 1: File to import not found or unreadable: bower_components/bootstrap-sass-official/assets/stylesheets/_bootstrap.
Load paths:
  Compass::SpriteImporter
  /Users/shiftonestudios/projects/kandy-web/carrier/client/app/styles
  /Users/shiftonestudios/.rvm/gems/ruby-2.1.1@global/gems/compass-core-1.0.1/stylesheets)
    error app/styles/base.scss (Line 2: Undefined mixin 'font-smoothing'.)
    error app/styles/dialer.scss (Line 13: Undefined mixin 'square'.)
    write tmp/compass_compiler-tmp_cache_dir-ZxE1PHwf.tmp/assets/mixins.css
    write tmp/compass_compiler-tmp_cache_dir-ZxE1PHwf.tmp/assets/variables.css

This is fixable by prepending '../../' to bower_components.

Error 2: (After fixing the file import issue)

directory tmp/compass_compiler-tmp_cache_dir-uysU7rYc.tmp/assets
    write tmp/compass_compiler-tmp_cache_dir-uysU7rYc.tmp/assets/app.css
    error app/styles/base.scss (Line 2: Undefined mixin 'font-smoothing'.)
    error app/styles/dialer.scss (Line 13: Undefined mixin 'square'.)
    write tmp/compass_compiler-tmp_cache_dir-uysU7rYc.tmp/assets/mixins.css
    write tmp/compass_compiler-tmp_cache_dir-uysU7rYc.tmp/assets/variables.css

But I believe it still fails to load the files properly as I can't use any mixins included from _bootstrap.scss or from mixins.scss which resides in the same folder.

quaertym commented 9 years ago

I use bootstrap-sass and this addon in many projects. This is the line to add to your appname.scss (remove underscore from name):

@import "../../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap";

andrewobrien commented 9 years ago

I have the exact same issue as @sumeetattree, not picking up bootstrap mixins or variables... using bootstrap-sass-official#3.3.1

quaertym commented 9 years ago

@andrewobrien Have you seen my previous comment?

lolmaus commented 9 years ago

Try this in Brocfile.js:

var app = new EmberApp({
  compassOptions: {
    outputStyle: 'expanded',
    importPath: [
      'bower_components/bootstrap-sass-official/assets/stylesheets',
      'bower_components/breakpoint-sass/stylesheets',
      'bower_components/singularity/stylesheets'
    ]
    //require: []
  }
});

Reference: http://hbrysiewicz.github.io/2014-10-14-ember-bootstrap-sass-summernote.html

lolmaus commented 9 years ago

Alternatively, you can create a config.rb and add the following:

add_import_path 'bower_components/bootstrap-sass-official/assets/stylesheets'
add_import_path 'bower_components/breakpoint-sass/stylesheets'
add_import_path 'bower_components/singularity/stylesheets'

quaertym commented 9 years ago

@sumeetattree Please close this issue, if it fixed by one of the answers.

bj-mcduck commented 9 years ago

Maybe this could be added to the docs?

quaertym commented 9 years ago

@brandonjmckay I'd love a PR if you have time.

Baril27 commented 9 years ago

I have run into a very similar issue in my project. @sumeetattree did you ever find a fix for your issues when importing the mixin 'font-smoothing'. Seems to be very similar to my issue when trying to use variables within my other .scss files in app/styles.

Here is my app.scss:

@import "compass";

@import "variables";
@import "mixins";
@import "global";

And here is the error I got in console: NOTE: '$color-darkGrey-3' is declared in app/styles/variables.scss and called in app/styles/global.scss

directory tmp/compass_compiler-output_path-rtFm3mTj.tmp/assets
    write tmp/compass_compiler-output_path-rtFm3mTj.tmp/assets/app.css
    error app/styles/global.scss (Line 6: Undefined variable: "$color-darkGrey-3".)
    write tmp/compass_compiler-output_path-rtFm3mTj.tmp/assets/mixins.css
    write tmp/compass_compiler-output_path-rtFm3mTj.tmp/assets/variables.css
Compilation failed in 1 files.

Command failed: /bin/sh -c compass compile --output-style=compressed --sass-dir=app/styles --css-dir="/Users/ericbaril/Git/Spinlister/spinlister-www-ember/tmp/compass_compiler-output_path-rtFm3mTj.tmp/assets"

Error: Command failed: /bin/sh -c compass compile --output-style=compressed --sass-dir=app/styles --css-dir="/Users/ericbaril/Git/Spinlister/spinlister-www-ember/tmp/compass_compiler-output_path-rtFm3mTj.tmp/assets"

bj-mcduck commented 8 years ago

Ya, I shouldn't be suggesting that if I can't do it. @quaertym Sorry for that.

prudvi commented 8 years ago

https://github.com/quaertym/ember-cli-compass-compiler/issues/37#issuecomment-154546236

facing above same issue and here i am adding my issue

error app/styles/dom/date_pickers.scss (Line 21: Undefined variable: "$midgrey".) Compilation failed in 48 files.

Command failed: /bin/sh -c compass compile --output-style=compressed --sass-dir=app/styles --css-dir="/home/indiapc_dev_05/OfficeAPP/emberCLI/my-new-app/tmp/compass_compiler-output_path-3WaMIRMY.tmp/assets"

rror: Command failed: /bin/sh -c compass compile --output-style=compressed --sass-dir=app/styles --css-dir="/home/indiapc_dev_05/OfficeAPP/emberCLI/my-new-app/tmp/compass_compiler-output_path-3WaMIRMY.tmp/assets"

quaertym / ember-cli-compass-compiler

Import errors with bootstrap-sass-official/other sass files. #37