I can't seem to figure out how to change compiled and compressed file extension with node-sass.
right now I tried different variations but it still compiles scss to style.css file.
I tried this
node-sass --watch scss -o dist --output-style compressed --out-file-extension .min.css
I also tried this
node-sass --watch scss -o dist/style.min.css --output-style compressed
I couldn't figure out how to do it with node-sass so I used Sass instead.
I accomplished the result I wanted with installing
npm install sass --save-dev
And adding this to my package.json
sass --watch scss/style.scss:dist/style.min.css --style compressed
scss/style.scss being the folder and file I want to compress and dist/style.min.css is the destination
Add this if you don't want the .map file
--no-source-map
Related
I'm new to SASS and needing to compile it into CSS code. I'm using node.js NPM to compile it, I've installed everything and I have my package.json file in the folder for my website. I also have all my CSS and SCSS/SASS files in my website folder, there's no extra folders. I'm following a tutorial and this is the script it uses:
"scss": "node-sass --watch assets/scss -o assets/css"
Obviously that does not work because the directories assets/scss and assets/css are wrong. I know I can fix the error by replacing them with the directories of my main.scss file and my main.css file in my website folder. I just don't know what I should write if it's all located in the same folder.
Can anyone tell me how the directories should be written or show me how I should write this script for compiling?
Your package.json is must in the root directory, so follow it and reach to the destination of your SCSS and CSS folder, I used below node-sass script
"node-sass": "node-sass -w --source-map true assets/scss/main.scss assets/css/style.css --output-style expanded"
If it's all located in the same folder
for that, you need to use
"node-sass": "node-sass -w --source-map true main.scss style.css --output-style expanded"
I have a "static" directory with SCSS files. I have application components that live in another directory, each of which has an SCSS file.
I'd like to compile all of these files into one .css file in an output directory. One of the "static" SCSS files is a variables file that should be imported into all of the other files. I'd also like to not have to maintain the import paths in each of the components, and more may be added later.
This is the script I've tried, which seems to only find the "static" directory and outputs them as individual css files in output/styles. The documented node-sass commands are pretty light on explanation.
"scss": "node-sass --watch ./my/static/styles ./my/components -o ./output/styles --output-style compressed"
I am going to assume this is not for a React project. If it is for React than there is a really good article here and it is relatively straight fwd. https://scotch.io/tutorials/using-sass-in-create-react-app-v2
Assuming a blank project in vanilla javascript this is what I do after running npm init and all that.
create and index.html file
create a css folder and scss/sass folder
inside the css folder create a style.css file
install node-sass as dev dependency
inside package.json file write a script like:
"scripts": {"compile:sass": "node-sass sass/main.scss css/style.css -w"}
run the script inside your terminal using npm run compile:sass
install live server if you have not already done so, npm i live-server -g
you can import all your scss files ie. _header.scss _nav.scss, _variables.scss into one main.scss file create above.
You might also need to have a non-empty style.css file before you compiling. This will be overridden once your run npm run compile:sass
Is there any way to compile node-sass forcefully even if there is no change in the SCSS files. Like the compass watch --force in ruby-sass
Now I am using the following command with the npm script
node-sass --watch assets/scss -o assets/css --output-style compressed
Yes you can:
node-sass --output-style=compressed --output=assets/css assets/sass
Thay will compile all .scss files located in assets/sass into assets/css.
You code uses the --watch argument; that means that node-sass will be watching assets/scss for any .scss or .sass file that changes, to compile the files.
You can learn more about node-sass here. Hope it helps!
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
Is there a way to run:
sass --watch a.scss:a.css
but have a.css end up being minified?
How would I avoid having to run a separate minification step as I compile my stylesheet?
sass --watch a.scss:a.css --style compressed
Consult the documentation for updates:
https://sass-lang.com/guide
https://sass-lang.com/documentation/cli/dart-sass#style
If you are using JetBrains editors like IntelliJ IDEA, PhpStorm, WebStorm etc. Use the following settings in Settings > File Watchers.
Convert style.scss to style.css set the arguments
--no-cache --update $FileName$:$FileNameWithoutExtension$.css
and output paths to refresh
$FileNameWithoutExtension$.css
Convert style.scss to compressed style.min.css set the arguments
--no-cache --update $FileName$:$FileNameWithoutExtension$.min.css --style compressed
and output paths to refresh
$FileNameWithoutExtension$.min.css
If you're using compass:
compass watch --output-style compressed
There are some different way to do that
sass --watch --style=compressed main.scss main.css
or
sass --watch a.scss:a.css --style compressed
or
By Using visual studio code extension live sass compiler
see more
This worked for me :
sass --watch --style=compressed a.scss:a.css
Reference