I would like to work in IntelliJ with SCSS files.
I see tutorial and I try to follow it. But for some reason this is not working for me.
WHAT I DID:
(I have a mac computer)
I download the node sass library : npm install -g sass
I add file watcher :
Scope : All Places
Program : usr/local/bin/node-sass
Arguments : --no-cache --update $FileName$:$FileNameWithoutExtension$.css
Output paths to refresh: $FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map
But if I create .scss file and save it, it doesn't create any .css file.
Arguments you have specified are valid neither for Sass nor for node-sass.
For Sass (npm install -g sass) the most simple setup is:
For node-sass (npm install -g node-sass), it would be:
Related
I am wondering, how to batch compile SCSS files via windows command line...in the older version the command 'sass --watch scssFolder:CSSFolder' will do the job but it seems obsolete in the newest version of the SASS.
The methods you used for the sass node module are deprecated in the latest version, so you have two (and more) options:
Option 1: using node-sass
This is the option with less effort. You already have Node.js installed (and npm), so you can install the node-sass compiler running npm install -g node-sass. After all the install is complete, you will be able to watch or compile an entire folder (or a single file).
node-sass input.scss output.css will compile a single file.
node-sass input/folder -o output/folder will compile a entire folder.
With the -w option you can watch a folder:
node-sass -w input/folder -o output/folder will watch a folder and compile the files to theoutput folder.
Just run node-sass --help for a complete list of options.
Option 2: using Ruby SASS
You need to install Ruby and the install the Sass Gem by running the following command line gem install sass. After all the install is complete, you will be able to watch or update (compile) an entire folder (or a single file).
update will compile a single file or multiple files in a folder (depending on the parameters). watch will do the same and after the initial compilation is completed it will watch the file or all the files in the specified folder, so everytime a change is detected on any of the target files, sass will compile the changed ones.
Both options have the same command line sintax:
sass --watch input/folder:output/folder
sass --watch input.scss:output.css
So, to compile all the files in a folder:
sass --update path/to/input/folder:path/to/output/folder
And to compile and then watch a folder:
sass --watch path/to/input/folder:path/to/output/folder
Just run sass --help for a complete list of options.
Hope it helps!
sass watch is not implemented for the moment in the darts version, to compile your .scss files you can use
sass filename.scss filename.css
If you want you can still use the ruby version but it will be obsolete soon.
Sass is throwing an error on multiple projects on both of my computers when I try to compile the scss files to css. I'm using dart-sass. I'm typing the command in the terminal from the root of the projects and the file path is correct. I've tried both
sass --watch src/styles/scss:src/styles/css
and also just
sass src/styles/scss:src/styles/css
but the results are the same:
Error reading src/styles/scss:src/styles/css: no such file or directory.
As such I can't compile any of my style files.
filename is required to select directory
Try this sass --watch src/styles/scss/fileName.scss:src/styles/css
Okay, I figured out a solution if anyone else runs into this problem. You should uninstall dart sass from your computer(prefix this command with sudo if using mac):
npm uninstall sass -g
Then, install a stable version of ruby sass:
gem install sass
Now you should be able to run sass --watch src/styles/scss:src/styles/css and it will compile.
Note: If you were to do npm install sass that would install the latest version written in dart, which is what seems to have caused my problems.
In the terminal, I had to make my way to the file location and then run the command. Example:
Project Structure:
src
abc
prq
main.html
main.scss
When I launch the terminal, it defaults to src folder
PS C:\Users\src> sass --watch main.scss:main.css
Running command here will throw error:
Error reading main.scss: no such file or directory.
Now, browsing to prq directory & running command, will be successful.
PS C:\Users\src\abc\pqr> sass --watch main.scss:main.css
Compiled main.scss to main.css.
Sass is watching for changes. Press Ctrl-C to stop.
I was using SASS as CSS pre-processor for Drupal theme. Where in the command line if I use $ compass watch. It keep on watching the change in .scss file and apply to .css file.
Just I am trying Bootstrap theme and there I am using LESS CSS pre-processor, Where I have to use $ lessc less/style.less css/style.css every time to apply change.
What is the equivalent of $ compass watch for LESS.
You need to install less-watch-compiler:
npm install -g less-watch-compiler
Make sure you installed less globally:
npm install -g less
In Terminal, navigate to your working directory path and run the following command:
less-watch-compiler FOLDER_TO_WATCH FOLDER_TO_OUTPUT
I was struggling with setting up libsass as it wasn't as straight-forward as the Ruby based transpiler. Could someone explain how to:
install libsass?
use it from command line?
use it with task runners like gulp and grunt?
I have little experience with package managers and even less so with task runners.
I picked node-sass implementer for libsass because it is based on node.js.
Installing node-sass
(Prerequisite) If you don't have npm, install Node.js first.
$ npm install -g node-sass installs node-sass globally -g.
This will hopefully install all you need, if not read libsass at the bottom.
How to use node-sass from Command line and npm scripts
General format:
$ node-sass [options] <input.scss> [output.css]
$ cat <input.scss> | node-sass > output.css
Examples:
$ node-sass my-styles.scss my-styles.css compiles a single file manually.
$ node-sass my-sass-folder/ -o my-css-folder/ compiles all the files in a folder manually.
$ node-sass -w sass/ -o css/ compiles all the files in a folder automatically whenever the source file(s) are modified. -w adds a watch for changes to the file(s).
More usefull options like 'compression' # here. Command line is good for a quick solution, however, you can use task runners like Grunt.js or Gulp.js to automate the build process.
You can also add the above examples to npm scripts. To properly use npm scripts as an alternative to gulp read this comprehensive article # css-tricks.com especially read about grouping tasks.
If there is no package.json file in your project directory running $ npm init will create one. Use it with -y to skip the questions.
Add "sass": "node-sass -w sass/ -o css/" to scripts in package.json file. It should look something like this:
"scripts": {
"test" : "bla bla bla",
"sass": "node-sass -w sass/ -o css/"
}
$ npm run sass will compile your files.
How to use with gulp
$ npm install -g gulp installs Gulp globally.
If there is no package.json file in your project directory running $ npm init will create one. Use it with -y to skip the questions.
$ npm install --save-dev gulp installs Gulp locally. --save-dev adds gulp to devDependencies in package.json.
$ npm install gulp-sass --save-dev installs gulp-sass locally.
Setup gulp for your project by creating a gulpfile.js file in your project root folder with this content:
'use strict';
var gulp = require('gulp');
A basic example to transpile
Add this code to your gulpfile.js:
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass', function () {
gulp.src('./sass/**/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./css'));
});
$ gulp sass runs the above task which compiles .scss file(s) in the sass folder and generates .css file(s) in the css folder.
To make life easier, let's add a watch so we don't have to compile it manually. Add this code to your gulpfile.js:
gulp.task('sass:watch', function () {
gulp.watch('./sass/**/*.scss', ['sass']);
});
All is set now! Just run the watch task:
$ gulp sass:watch
How to use with Node.js
As the name of node-sass implies, you can write your own node.js scripts for transpiling. If you are curious, check out node-sass project page.
What about libsass?
Libsass is a library that needs to be built by an implementer such as sassC or in our case node-sass. Node-sass contains a built version of libsass which it uses by default. If the build file doesn't work on your machine, it tries to build libsass for your machine. This process requires Python 2.7.x (3.x doesn't work as of today). In addition:
LibSass requires GCC 4.6+ or Clang/LLVM. If your OS is older, this version may not compile. On Windows, you need MinGW with GCC 4.6+ or VS 2013 Update 4+. It is also possible to build LibSass with Clang/LLVM on Windows.
The installation of these tools may vary on different OS.
Under Windows, node-sass currently supports VS2015 by default, if you only have VS2013 in your box and meet any error while running the command, you can define the version of VS by adding: --msvs_version=2013. This is noted on the node-sass npm page.
So, the safe command line that works on Windows with VS2013 is:
npm install --msvs_version=2013 gulp node-sass gulp-sass
npx node-sass input.scss out.css
In Windows 10 using node v6.11.2 and npm v3.10.10, in order to execute directly in any folder:
> node-sass [options] <input.scss> [output.css]
I only followed the instructions in node-sass Github:
Add node-gyp prerequisites by running as Admin in a Powershell (it takes a while):
> npm install --global --production windows-build-tools
In a normal command-line shell (Win+R+cmd+Enter) run:
> npm install -g node-gyp
> npm install -g node-sass
The -g places these packages under %userprofile%\AppData\Roaming\npm\node_modules. You may check that npm\node_modules\node-sass\bin\node-sass now exists.
Check if your local account (not the System) PATH environment variable contains:
%userprofile%\AppData\Roaming\npm
If this path is not present, npm and node may still run, but the modules bin files will not!
Close the previous shell and reopen a new one and run either > node-gyp or > node-sass.
Note:
The windows-build-tools may not be necessary (if no compiling is done? I'd like to read if someone made it without installing these tools), but it did add to the admin account the GYP_MSVS_VERSION environment variable with 2015 as a value.
I am also able to run directly other modules with bin files, such as > uglifyjs main.js main.min.js and > mocha
How could I trace changes in whole directory containing many sass files ? I'm using the following command to watch changes in sass
file:
sass --watch style.scss:style.css
But how to watch changes in whole directory/folder containing many sass files.
Simply use the command sass --watch <input folder>:<output folder>, like this:
$ ls -l
css/ sass/
$ sass --watch sass:css
Where <input folder> contains the Sass files and <output folder> that hosts the generated CSS files.
Expanding the answer by piouPiouM a little:
Output files will be created with the same names as input files except ending with .css.
<input folder> and <output folder> can be the same.
Both folders can be the present working directory, so the following is valid:
$ sass --watch .:.
Go to you terminal and get to you folder then wrote:
sass --watch .
this will watch all sass files and convert to css files with the same name.
also you can do it in this way:
sass --watch ~/user/youUser/workspace/project/styles/
I hope this can help you.
I ended up doing this without using Grunt or Sass-watch:
npm install -g watch
watch "sass assets/app.scss assets/dist/app.css" assets/css
if you are in your current folder then do the following to watch it.
F:\sass tutorial>sass --watch ./:./
Just in case someone faces with this issue in 2018:
sass Website refers to Ruby Sass that is been deprecated.
and as now (May 2018) if you install dart sass via npm , it does not support --watch command
What to do:
you need to install node-sass globaly , like:
npm install node-sass -g
and then restart the command line , then use this code:
node-sass --watch scss/styles.scss css/styles.css
to compile your scass files to css.
basically node-sass supports --watch command and we use that to compile our scss codes to regular css files.
and just in case you get an error like this at the first time that you save your .scss file:
{
"status": 3,
"message": "File to read not found or unreadable: yourdirectory/scss/styles.scss",
"formatted": "Internal Error: File to read not found or unreadable: yourdirectory/scss/styles.scss\n"
}
what you need to do is save it again, it will work correctly!
According to the information, you can use the next command line:
sass --watch .
Source: http://sassbreak.com/watch-your-sass/#what-does---watch-do
You can create one sass file which includes the rest of the files, and then just watch this file.
Alternately, look into Grunt and the very good grunt-contrib-compass plugin
You can set sass to watch all the .scss files(for my case i got several .scss files in src/static folder) to compile, but before install it globally:
npm i -g sass
then go to the project folder and type command below:
sass --watch $(pwd)/src/static
also you can wrap it in npm script in package.json, like
"scripts": {
"sass:watch": "sass --watch $(pwd)/src/static"
}
and run it by this command:
npm run sass:watch