how can I run pure gulp sass? I'd like to have installed just node modules and gulp and run some port of sass using watch. I'd like to avoid ruby version of sass. Is it possible? I run windows but i'd like the solution to be cross-platfom, which shouldn't be problem for node.
Thanks.
if you are looking for the seemlest and lightest solution without the needs of writing any gulp scripts, you can simply use node-sass and npm scripts.
For example in your package.json :
{
"scripts": {
"sass": "node-sass -w ./path/to/entry-point.scss ./path/to/build.css",
},
"devDependencies": {
"node-sass": "^4.5.3"
}
}
The -w is for the watch feature based on your entry parameter.
Then, simply :
$ npm run sass
// or
$ yarn sass
Check the CLI documentation for more informations.
I hope, it will help !
Related
I'm trying to get sass to run through the terminal and when I try, I get the error mentioned above. It seems that the installation of sass itself was successful because I can see it in my package.json file:
"devDependencies": {
"sass": "^1.51.0"
}
I have tried uninstalling/reinstalling sass, and restarting the client, but can't get the 'sass' keyword to work. I currently have my project located in a folder that github is also directed at so I can make pushing updates to github easier. Any help would be greatly appreciated.
Try npx sass, or create a new entry in the scripts section of your {package,yarn}.json file that calls sass.
"scripts": {
"build": "sass input.scss output.css",
}
Then, npm run build or yarn build, depending on which package manager you are using.
https://sass-lang.com/documentation/cli/dart-sass
--watch command
no longer works for scss. What's the equivalent
Bought a new pc and can't get newest version of sass to compile
This is going to be marked as duplicate but please point me in right direction
No, I don't think so.
As the official SASS website explained, you can use --watch command like this:
sass --watch <input file or folder>:<output file or folder>
To install sass on your new machine you can use this command:
npm install -g sass
How can configure grunt-sass to also watch for changes using the underlying node-sass watch option?
I understand I can achieve the same functionality with grunt-contrib-watch to watch for changes and re-run the grunt-sass task, but that will be slower since it will recompile the whole thing instead of just compiling the changes.
Thanks!
Answering my own question, in case this can help anyone else:
The only way I found solving this, is using the node-sass CLI through grunt. To achieve this, install the amazing grunt-exec task and set it to run a command with the --watch option.
An example usage (with support for several includePath directories):
exec: {
nodeSass: {
cmd: function() {
// Include path option string built from the gruntConfig.cssFiles array.
var includeFilesOption = gruntConfig.cssFiles.map(function(cssFilePath) {
return '--include-path ' + cssFilePath;
}).join(' ');
return 'node-sass app/scss/style.scss app/generated/style.css' + includeFilesOption + ' --watch';
}
}
}
You will also need to install node-sass via npm. In that case, you can simply add the following to your package.json file:
"scripts": {
"install": "npm install node-sass -g"
},
I'm attempting to get Gulp up and running on MacOS 10.12.3. However, no matter what I do, I am getting the following error: No Gulp File Found.
I have done the following:
Installed gulp cli globally via sudo bash. Gulp version as of this writing is 3.9.1
Installed gulp locally via npm install gulp. Gulp version as of this writing is 3.9.1.
I've done the touch gulp command. This has created a 0kb blank gulp file.
I've created a test gulp.js file in my root directory. The code for said file looks likevar gulp = require('gulp');
Any thoughts on what's going on here?!
Your gulp file needs to be called gulpfile.js, not gulp.js.
While you're at it, I also recommend initializing npm by running npm init (it will walk you through it… just use all the defaults for now), and then adding gulp to your package.json by running npm install --save gulp. This will add
"dependencies": {
"gulp": "^3.9.1"
}
to your package.json.
What's the point of this? npm's package.json's "dependencies" becomes a list of all the gulp-related plugins your project needs. Any time you need to recreate the project, all you need is that package.json and you can run npm install to install them.
Note that even after renaming your file, you'll get the error
Task 'default' is not in your gulpfile
At the very least gulpfile.js will have to include the line gulp.task('default');… but if that's all your gulpfile has, you won't actually be doing anything with gulp.
I highly recommend working through css-trick's Gulp for Beginners - it doesn't take long, and you'll come out with a much more complete understanding of how to use gulp.
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