I've been trying to import the sprites module to my SASS stylesheet, but I got the following error:
/*
Error: File to import not found or unreadable: compass/utilities/sprites.
Load path: /Users/ToanNguyen/Documents/SourceCode/CSS/helloCompass/sass
on line 1 of sass/Spriting.scss
1: #import "compass/utilities/sprites";
Backtrace:
sass/Spriting.scss:1
/Users/ToanNguyen/.rvm/gems/ruby-2.1.1#global/gems/sass-3.4.10/lib/sass/tree/import_node.rb:66:in `rescue in import'
I have sass 3.4.10 and compass installed, and have a config file like this:
And the content of the scss file is
**#import "compass/utilities/sprites";**
How can I fix the error?
Related
How to add font-awesome to laravel project.
I ran:
npm install font-awesome
But what is next, how to import it in my app.scss what is correct path?
I am trying :
#import "/node_modules/font-awesome/scss/font-awesome.scss";
But get and error:
ERROR in ./resources/assets/sass/app.scss
Module build failed: ModuleBuildError: Module build failed:
#import "/node_modules/font-awesome/scss/font-awesome.scss";
If you're pulling a file in from your node_modules directory you can use ~ followed by the path to the file inside node_modules:
#import '~font-awesome/scss/font-awesome';
If you have:
mix.options({
processCssUrls: false
});
Then you will need to copy the files in your webpack.mix.js file with something like:
mix.copy('./node_modules/font-awesome/fonts/**', 'public/fonts/font-awesome');
And then above the #import in your .scss file have:
$fa-font-path: '/fonts/font-awesome';
I followed the foundation tutorial to create a new project. So I compile and watch the sass files with foundatoin watch which compile my files and stream the output to the localhost but I get this error when I am trying to import compass by typing #import "compass"; :
Error in plugin 'sass'
Message:
src\assets\scss\app.scss
Error: File to import not found or unreadable: compass
Parent style sheet: C:/Users/Kevin/Dropbox/Work/Perso/2016_01_KMStudio Site/km_website/src/assets/scss/app.scss
on line 7 of src/assets/scss/app.scss
>> #import "compass";
I am really a newbie to gulp, gem and all this stuff, so I tried to add compass by running bower install compass but this doesn't help. I already installed compass with gem by running gem install compassand this doesn't fix the problem.
So I searched to modify the gulp file, but I don't know anything about it, I found this post and I tried to add .pipe(sass({ compass: true, sourcemap: true, style: 'compressed' })) into my sass pipe. And this leads me to this error:
'sass' errored after 7.62 s
[19:33:49] TypeError: Cannot read property 'isFile' of undefined
at isFile (C:\Users\Kevin\Dropbox\Work\Perso\2016_01_KMStudio Site\km_website\node_modules\gulp-load-plugins\node_modules\resolve\lib\sync.js:12:20)
at loadAsFileSync (C:\Users\Kevin\Dropbox\Work\Perso\2016_01_KMStudio Site\km_website\node_modules\gulp-load-plugins\node_modules\resolve\lib\sync.js:42:17)
at loadAsDirectorySync (C:\Users\Kevin\Dropbox\Work\Perso\2016_01_KMStudio Site\km_website\node_modules\gulp-load-plugins\node_modules\resolve\lib\sync.js:68:16)
at loadNodeModulesSync (C:\Users\Kevin\Dropbox\Work\Perso\2016_01_KMStudio Site\km_website\node_modules\gulp-load-plugins\node_modules\resolve\lib\sync.js:77:21)
at Function.module.exports [as sync] (C:\Users\Kevin\Dropbox\Work\Perso\2016_01_KMStudio Site\km_website\node_modules\gulp-load-plugins\node_modules\resolve\lib\sync.js:27:17)
at requireFn (C:\Users\Kevin\Dropbox\Work\Perso\2016_01_KMStudio Site\km_website\node_modules\gulp-load-plugins\index.js:64:25)
at Object.defineProperty.get [as sourcemaps] (C:\Users\Kevin\Dropbox\Work\Perso\2016_01_KMStudio Site\km_website\node_modules\gulp-load-plugins\index.js:103:41)
at sass (C:/Users/Kevin/Dropbox/Work/Perso/2016_01_KMStudio Site/km_website/gulpfile.babel.js:79:11)
at sass (C:/Users/Kevin/Dropbox/Work/Perso/2016_01_KMStudio Site/km_website/gulpfile.babel.js:80:11)
at sass (C:/Users/Kevin/Dropbox/Work/Perso/2016_01_KMStudio Site/km_website/gulpfile.babel.js:80:11)
Since I know nothing about gulp, streaming and sass compiling, I am wondering if someone could help me to add compass' mixins to my project. I am on Windows.
Year ago I did a Foundation project and all went ok, but I need to do some changes now and now I have issue with compiling scss.
Folder struction contains
Bower_components/
css/
images/
js/
scss/
config.rb
Config.rb looks like this
# Require any additional compass plugins here.
add_import_path "bower_components/foundation/scss"
# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "css"
sass_dir = "scss"
images_dir = "images"
javascripts_dir = "js"
And I am using Koala for compiling scss file (mobile_CP.scss) that looks like this:
/*
========== VENDOR
*/
#import "compass/utilities/sprites";
#import "compass/css3/images";
#import "compass/css3/border-radius";
#import "compass/css3/box-shadow";
/*
========== UTILS
*/
#import "utils/variables.cp.scss";
/*
========== COMPONENTS
*/
#import "components/CP/container";
Now I get error where it says:
Error: Undefined mixin 'background-image'.
on line 165 of D:/TestRepo/mobile.application/trunk/scss/utils/_variables.cp.scss, in `background-image'
from line 165 of D:/TestRepo/mobile.application/trunk/scss/utils/_variables.cp.scss, in `cpButton-silver'
from line 246 of D:/TestRepo/mobile.application/trunk/scss/components/CP/_overwrite.scss
from line 20 of D:\TestRepo\mobile.application\trunk\scss\mobile_CP.scss
Use --trace for backtrace.
Can't wrap my head around why I get this error now Undefined mixin 'background-image' and before it all worked ok??? Am I overseeing anything?
I found the solution for this issue. I was using the new version of compass (1.0.3) and sass (3.4.20), but the thing is i installed foundation project with bower and this didn't work with newer versions so I had to downgrade to compass 0.12.7 and sass 3.2.19. This complied my code with no errors.
I built a Meteor app that uses the bourbon scss library. I tried to push my app to heroku got the following error:
Errors prevented bundling:
While building the application:
client/styles/bullets.scss: Scss compiler error: undefined
/tmp/build_52129b38b75a2e6238de86ec866d89cf/mauvsa-gala-9a1eb00877caedf4b5202f30825b1627fb75f874/client/styles/bullets.scss:1:
file to import not found or unreadable: "bourbon/bourbon"
Current dir:
/tmp/build_52129b38b75a2e6238de86ec866d89cf/mauvsa-gala-9a1eb00877caedf4b5202f30825b1627fb75f874/client/styles/
client/styles/comments.scss: Scss compiler error: undefined
/tmp/build_52129b38b75a2e6238de86ec866d89cf/mauvsa-gala-9a1eb00877caedf4b5202f30825b1627fb75f874/client/styles/main.scss:1:
file to import not found or unreadable: "bourbon/bourbon"
Current dir:
/tmp/build_52129b38b75a2e6238de86ec866d89cf/mauvsa-gala-9a1eb00877caedf4b5202f30825b1627fb75f874/client/styles/
client/styles/hero.scss: Scss compiler error: undefined
/tmp/build_52129b38b75a2e6238de86ec866d89cf/mauvsa-gala-9a1eb00877caedf4b5202f30825b1627fb75f874/client/styles/hero.scss:1:
file to import not found or unreadable: "bourbon/bourbon"
Current dir:
/tmp/build_52129b38b75a2e6238de86ec866d89cf/mauvsa-gala-9a1eb00877caedf4b5202f30825b1627fb75f874/client/styles/
client/styles/home.scss: Scss compiler error: undefined
/tmp/build_52129b38b75a2e6238de86ec866d89cf/mauvsa-gala-9a1eb00877caedf4b5202f30825b1627fb75f874/client/styles/home.scss:1:
file to import not found or unreadable: "bourbon/bourbon"
Current dir:
/tmp/build_52129b38b75a2e6238de86ec866d89cf/mauvsa-gala-9a1eb00877caedf4b5202f30825b1627fb75f874/client/styles/
client/styles/hover.scss: Scss compiler error: undefined
/tmp/build_52129b38b75a2e6238de86ec866d89cf/mauvsa-gala-9a1eb00877caedf4b5202f30825b1627fb75f874/client/styles/main.scss:1:
file to import not found or unreadable: "bourbon/bourbon"
Current dir:
/tmp/build_52129b38b75a2e6238de86ec866d89cf/mauvsa-gala-9a1eb00877caedf4b5202f30825b1627fb75f874/client/styles/
client/styles/navigation.scss: Scss compiler error: undefined
/tmp/build_52129b38b75a2e6238de86ec866d89cf/mauvsa-gala-9a1eb00877caedf4b5202f30825b1627fb75f874/client/styles/main.scss:1:
file to import not found or unreadable: "bourbon/bourbon"
Current dir:
/tmp/build_52129b38b75a2e6238de86ec866d89cf/mauvsa-gala-9a1eb00877caedf4b5202f30825b1627fb75f874/client/styles/
client/styles/registration.scss: Scss compiler error: undefined
/tmp/build_52129b38b75a2e6238de86ec866d89cf/mauvsa-gala-9a1eb00877caedf4b5202f30825b1627fb75f874/client/styles/registration.scss:1:
file to import not found or unreadable: "bourbon/bourbon"
Current dir:
/tmp/build_52129b38b75a2e6238de86ec866d89cf/mauvsa-gala-9a1eb00877caedf4b5202f30825b1627fb75f874/client/styles/
client/styles/main.scss: Scss compiler error: undefined
/tmp/build_52129b38b75a2e6238de86ec866d89cf/mauvsa-gala-9a1eb00877caedf4b5202f30825b1627fb75f874/client/styles/main.scss:1:
file to import not found or unreadable: "bourbon/bourbon"
Current dir:
/tmp/build_52129b38b75a2e6238de86ec866d89cf/mauvsa-gala-9a1eb00877caedf4b5202f30825b1627fb75f874/client/styles/
! Push rejected, failed to compile Node.js app
Apparently, it's not able to find the scss files, although they are in my client/styles folder. Can someone help?
I was having the same problem and finally removed the meteor-bourbon, meteor-neat, and meteor-bitters packages and added them via bower instead.
Add this bower meteor package: mquandalle:bower
Bower init to get your bower.json (I just put it in the root of the directory) and add your bourbon/neat/bitters dependencies. DON'T bower install them as meteor automatically does it. If you did, just delete the bower_components folder.
The bottom of my bower.json:
"dependencies": {
"bourbon": "4.2.1",
"neat": "1.7.2",
"bitters": "1.0.0"
}
Then import the files from their location in /.meteor/local/. For example, in my main.scss I have:
#import "./.meteor/local/bower/bourbon/app/assets/stylesheets/bourbon";
#import "./.meteor/local/bower/neat/app/assets/stylesheets/neat";
#import "./.meteor/local/bower/bitters/app/assets/stylesheets/base";
Then I was able to push to heroku successfully...I hope it works for you too!
I am trying to compile my Sass file, but keep getting this error in my terminal:
error sass/app.scss (Line 60: File to import not found or unreadable:
custom.
This happened after:
cd to the containing folder
sass --watch `sass:css`
What did I do wrong? What steps should I take? Do I need to use Compass to use Sass?