Sass Compilation Error - terminal

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?

Related

SCSS problem: Unable to keep sass watch running

I've been having a very annoying problem lately.
Every time I run the command "sass --watch scss:css" the scss compiles the code but returns the error:
Unexpected exception:
Error: UNKNOWN: unknown error, watch
This problem did not occur before and due to lack of information I am having difficulties to correct it.
Every time I need to turn scss into css I can but I need to run the command every time because it stops watching.
Any clues?
Here is the console:
PS X:\Trabalho\PrintOne\Loja_Modelo_2013\Tecnologia\Desenvolvimento\novaLoja\assets> sass --watch scss:css
Compiled scss\imports.scss to css\imports.css.
Sass is watching for changes. Press Ctrl-C to stop.
Unexpected exception:
Error: UNKNOWN: unknown error, watch

Next JS: unable to use scss on Windows

I am building a Next JS application. To admit, this is my first exposure to Next JS. Now, I am having a problem using SCSS with my Next JS application. I have created a file called, assets/auth.scss. Then I imported it into pages/_app.js as follow.
import '../assets/auth.scss';
When I run "npm run dev", I am getting the following error.
./node_modules/next/dist/compiled/css-loader/cjs.js??ruleSet[1].rules[2].oneOf[7].use[1]!./node_modules/next/dist/compiled/postcss-loader/cjs.js??ruleSet[1].rules[2].oneOf[7].use[2]!./node_modules/nex
t/dist/compiled/resolve-url-loader/index.js??ruleSet[1].rules[2].oneOf[7].use[3]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[2].oneOf[7].use[4]!./assets/auth.scss
Error: Node Sass version 6.0.1 is incompatible with ^4.0.0 || ^5.0.0.
Error: Cannot find module 'C:\Users\Acer\Desktop\shar-kya-mal-next-js\nextjs-blog\.next\build-manifest.json'
Require stack:
Then I tried installing node-sass package too. It still does not work. How can I fix it?
Do you use npm install sass or node sass? Every next project where i will use scss i use npm install sass and it works normally. Do you do something different?
Try to use npm install sass or yarn install sass

Meteor application not pushing to Heroku error

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!

Bourbon Neat is giving me error after sass watch

Hi guys i am new to Bourbon Neat.
ive installed bourbon and neat in a folder.
Now after i do this
sass --watch scss
When it compiles the css generated has following errors.
Syntax error: Invalid CSS after "... $grid-columns ": expected "}", was "!global !default;"
on line 48 of C:/neatFinale/scss/../neat/functions/_private.scss
from line 2 of C:/neatFinale/scss/../neat/_neat-helpers.scss
from line 6 of C:/neatFinale/scss/../neat/_neat.scss
from line 2 of C:/neatFinale/scss/main.scss
Please tell me if i am doing something wrong.
Thanks.
Ps: When doing Neat--ver it says DL is deprecated.

Correct way to install singularity with bower?

I'm running in some troubles installing singularity in my yeoman gulp-webapp project. First, I installed singularity with bower.
After that I had a projekt structure like this:
My Projekt
app
bower_components
compass_breakpoint
sassy-maps
singularity
styles
main.scss
Then I imported singularity into my main.scss file like this:
#import "../bower_components/singularity/stylesheets/singularitygs";
In _singularity.scss I corrected the import path for breakpoint to:
#import "../../compass-breakpoint/stylesheets/breakpoint";
If I run gulpnow in the terminal I get this strange error:
[gulp] Error in plugin 'gulp-ruby-sass':
Syntax error: Invalid CSS after "...ntext holder') ": expected "}", was "!global;"
on line 47 of /Users/Shared/Dropbox/Server/htdocs/Frameworks/my-project/app/bower_components/compass-breakpoint/stylesheets/_breakpoint.scss
from line 4 of /Users/Shared/Dropbox/Server/htdocs/Frameworks/my-project/app/bower_components/singularity/stylesheets/_singularitygs.scss
from line 1 of /Users/Shared/Dropbox/Server/htdocs/Frameworks/my-project/app/styles/main.scss
at ChildProcess.<anonymous> (/Users/Shared/Dropbox/Server/htdocs/Frameworks/my-project/node_modules/gulp-ruby-sass/index.js:80:25)
at ChildProcess.EventEmitter.emit (events.js:98:17)
at maybeClose (child_process.js:743:16)
at Socket.<anonymous> (child_process.js:956:11)
at Socket.EventEmitter.emit (events.js:95:17)
at Pipe.close (net.js:466:12)
Did anyone have an idea how to get this setup running?
Thanks, Oli
While you can install Singularity through Bower, you need to make sure you're running a compiler that's compatible with Sass 3.3. The best way to ensure you are in fact using the correct version of Sass is to version your Ruby with Bundler. Your Gemfile should look something like the following:
source 'https://rubygems.org'
gem "sass", "~>3.3.0.rc.3"
Then make sure that Gulp Ruby Sass is running through bundleExec

Resources