I would like to know how I can prevent Sass from writing .map files. I'm using Sass in a very basic setup:
sass --watch style.scss:style.css
what parameters do I have to add to avoid Sass to generate map files?
That depends on the implementation.
For node-sass and ruby-sass try this:
sass --sourcemap=none --watch style.scss:style.css
If you're using dart-sass the usage is --no-source-map:
sass --no-source-map --watch style.scss:style.css
it's works:
sass --watch --no-source-map input.scss output.css
with
1.8.0 compiled with dart2js 2.0.0-dev.66.0
I'm using sass version 1.13.2 compiled with dart2js 2.0.0 on Ubuntu and it's sass --no-source-map --watch [source].scss:[target].css
as --source-map enables source map and --no-source-map disables it.
Works:
sass --sourcemap=none style.scss style.css
Doesn't work, still generate .map file:
sass --update --sourcemap=none style.scss:style.css
So make sure you have no --update flag
As default, the sourcemap is enabled for Dart Sass and if you add --no-source-map it will disable it.
Related
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!
Is there an easier way to compile my sass files with sourcemap enabled rather than the following command?
sass --compass --sourcemap --style compact --watch sass:css
If I was using compass, I would use 'compass watch' and it reads configurations from the config.rb file.
No, unfortunately.
In a future release Sass will emit the sourcemap as a default. https://github.com/nex3/sass/issues/1189
Until then, either a grunt configuration or an alias in your bash profile is your best bet.
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
Does Compass support the --sourcemap option in Sass yet? I would like to run Sass through Compass. I have
sass_options = {:sourcemap => true}
in my config.rb, but when I run compass watch in my project folder no sourcemap files are generated. On the other hand, when I run
sass --compass --sourcemap --watch scss:css
The source file is generated, but the config.rb is ignored.
(For anybody wondering what a sourcemap is, it's a file that allows Developer Tools inspector to point to the origin of a style in a Sass scss file when you inspect an element.)
The solution provided by #cimmanon didn't work for me. What worked for me was the following (credits to Serge-Z in https://github.com/Compass/compass/issues/1108):
sudo gem install compass-sourcemaps --pre
Then you just do compass watch as usual with sass_options = {:sourcemap => true} in your config.rb.
In case you are on OS X El Capitan and have problems installing due to rootless mode (credits to Thomzzzzz in https://github.com/Compass/compass/issues/2018):
sudo gem install -n /usr/local/bin compass-sourcemaps --pre
Source maps are included starting with Sass 3.3 or later, which is only compatible with Compass 1.0.
https://github.com/chriseppstein/compass/issues/1108
Adding the following to your config.rb will only add the sourcemap information directly to your compiled CSS:
sass_options = { :debug_info => true }
Output:
#media -sass-debug-info{filename{font-family:file\:\/\/\/home\/chris\/compass\/sass\/test\.scss}line{font-family:\0000314}}
.foo {
color: red;
}
To get your sourcemap file(s), you need to add this option to your config.rb:
sourcemap = true
Console output:
$ compass watch
modified config.rb
clean css
delete css/test.css
>>> Compass is watching for changes. Press Ctrl-C to Stop.
write css/test.css
write css/test.css.map
For me it works with
sourcemap = true
in config.rb (solution taken from https://chillco.com/blog/setting-sass-and-compass-source-maps)
I'm using compass via Koala (http://koala-app.com/)
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