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!
Related
I am having a hard time installing the swwetalert2 package.
npm i sweetalert2 - its fine.
the package is inside node_modules.
inside my app.css i tried different variation of the #import
#import '/sweetalert2';
#import '~sweetalert2';
#import 'sweetalert2/dist';
but every time I run npm run dev or production I get this:
ERROR in ./resources/css/app.css
Module build failed (from ./node_modules/css-loader/index.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/src/index.js):
Error: Failed to find 'sweetalert2'
no matter the variation I use for the location.
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.
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?
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?