Dart/sass on OSX 10.13.3 "Cannot open file" - macos

In trying to learn/use sass for 1st time, I used Homebrew to install dart-sass on recently updated High Sierra 10.13.3 . That worked and sass --version shows 1.1.1 I created a simple .scss file:
$color: #d9534f;
body {
color: $color;
}
and while in the same directory, then issued:
sass main.scss main.css --trace
in console and got:
Error reading main: Cannot open file.
dart:io _File.readAsBytesSync
package:sass/src/io/vm.dart 27 readFile
package:sass/src/compile.dart 33 compile
package:sass/sass.dart 63 compile
package:sass/src/executable.dart 110 main
What do I need to change, learn or do to get this working?

Oops. Reinstall. I ran
brew update multiple times, then
brew uninstall sass then
brew install --devel sass/sass/sass
and now
sass main.scss main.css
works.

Related

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

SASS cannot watch scss, using [--watch]

I made a standard installation of SASS (Dart Sass 1.16.1), following instructions: https://sass-lang.com/install.
My setup:
node -v : v11.6.0
sass --version: 1.16.0
OS: Ubuntu linux 18.04 LTE.
SASS installation:
npm install -g sass
Process flow:
First creation of CSS from SCSS:
sass index.scss index.css
Attemt to start [--watch]: (the both files are located in same folder):
sass --no-source-map --watch index.scss index.css
Also tried with colon [:] between file names, which actually is only required when specifying folders:
sass --no-source-map --watch index.scss:index.css
After activating the watch, I change something [color: red;] to [color: blue], but css is not update when saving scss.
Terminal printout after running [--watch]: None.
My SCSS file:
$color: blue;
.div-1 {
background-color: $color;
}
The CSS result without running [--watch]:
.div-1 {
background-color: red;
}
I Think the problem might be, that you need to use : between the input and the output.
sass --no-source-map --watch index.scss:index.css
Reference is here:
https://sass-lang.com/guide

My compass has stopped working together with Grunt

Im using sass and compass together with Grunt to build my project. But suddenly compass has just stopped working. When i run my Grunt i get this error:
"Running "sass:dist" (sass) task
ERROR: Cannot load compass.
Warning: Exited with error code 1 Use --force to continue."
The versions are:
compass (0.12.4)
sass (3.2.18)
I have googled ant tried a lot of stuff but none seems to work for me.
Any suggestions?

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

Jeet Framework: Got an error when trying to run Jeet 2:

Got an error when trying to run Jeet 2:
In CMD:
Compiling Stylus OK!
Saving Compiled Stylus OK!
Live Reload is on and listening!
Compiling SCSS ... Error!
I'm on Windows XP
Is there something with the Ruby installation on Windows?
I followed your tutorial on https://github.com/CorySimmons/jeet#quick-start
If you can type ruby into your Command Prompt and it doesn't return an error then you have Ruby.
You need to install Compass as well: http://compass-style.org/install/
In Windows command prompt you don't use the $ in front of the gem command! You just type gem update system, instead of $ gem update system.

Resources