I've a quick question about setting up a watcher in WebStorm for SCSS transpiling.
I want the watcher to transpile scss files to a specific folder:
Project/assests/scss/(several scss files)
transpile to
Project/src/css/(transpiled css files)
I noticed that there are terms like $FileNameWithoutExtension$ or $FileParentDir$, what language is that? :)
Thanks a lot!
Please try the following:
Arguments: --no-cache --update $FileName$:$ProjectFileDir$/src/css/$FileNameWithoutExtension$.css
Working directory: $FileDir$
Output paths to Refresh: $ProjectFileDir$/src/css/$FileNameWithoutExtension$.css:$ProjectFileDir$/src/css/$FileNameWithoutExtension$.css.map
Related
Is it possible to use webpack to compile a directory of scss files to a directory of css files?
I don't want to use the sass command line tool because it's part of an angular project and with the help of custom builders I can run the webpack script with only ng build
e.g.
- src
- themes
- theme-dark.scss
- theme-light.scss
to
- dist
- themes
- theme-light.css
- theme-dark.css
Hower I think this is currently not possible because webpack seems to need the scss imported in javascript and not in single files and writes the generated files to js and not css.
Is that what I want even possible with webpack or do I need another tool?
You can use Sass compiler to compile scss to css with a single command. Exactly the use-case you are looking for.
sass --watch src/themes:dist/themes
watch will compile on a file change (optional)
I have installed SASS on Ubuntu as explained in the instructions, which means that I downloaded the source dart-sass-1.22.2-linux-x64.tar.gz, extracted it and added a path variable into my .bashrc.
Calling
sass input.scss output.css
will create the css file from scss source as explained in the guide.
However, when entering
sass --watch input.scss output.css
nothing happens. The file output.css is not updated when input.scss is saved. There is also no message like
Sass is watching for changes. Press Ctrl-C to stop.
as I have seen in various other posts. This is how my terminal looks:
Any ideas why sass is not watching?
I have the same issue like you and this config work. I create 2 folder scss and css like
this
Then I create 1 scss file inside scss folder then I run
sass --watch scss:css
Then result
I think you forgot the : my example is this: sass --watch assets/css/main.scss:assets/css/main.css
I had to rewrite this every time I want to see a live preview.
sass stylesheet.scss stylesheet.css
I use sass --watch stylesheet.scss:stylesheet.css. When saving your .scss file, it'll automatically update the .css file.
You might also consider sass --watch stylesheet.scss:stylesheet.css --style expanded --sourcemap=none to keep the .css file readable.
I'd recommend the Sass Workflow class on Udemy.
Try out Grunt or Gulp with Sass: A great tutorial: https://www.taniarascia.com/getting-started-with-grunt-and-sass/
You need something to compile it automatically. As an example, there are solutions that use node.js to automatically compile for you on your computer. One tool is Foundation for Websites by Zurb.
You can install the application which will automatically compile sass for you.
For more information, check out: http://foundation.zurb.com/sites/download.html/
you can use this code
sass --watch file.sass:file.css
or
sass --watch foldersass:foldercss
Sass can be compiled automatically using below command:
sass --watch SASS_SOURCE_PATH:CSS_BUILD_PATH --style=expanded --no-source-map
Where:
SASS_SOURCE_PATH: Path of sass file
CSS_BUILD_PATH: Path of build CSS file. Where do you want to save CSS file
--no-source-map: will not output a map file, which is not readable.
--style=expanded: will expand CSS to human readable.
I have a styles folder in my project. Inside it I have the following folders: css, scss, css-maps. I want the following: when I update a scss file in scss folder, I want it to create/update a css file with the same name in css folder and *.css.map file in css-maps folder.
|styles
|css
my-style.css
|css-maps
my-style.css.map
|scss
my-style.scss
I defined a SCSS watcher in my Intellij. It has the following settings:
Arguments: --no-cache --update $FileName$:../css/$FileNameWithoutExtension$.css --no-cache --update $FileName$:../css-maps/$FileNameWithoutExtension$.css.map
Working directory: $FileDir$
Output paths to refresh: ../css/$FileNameWithoutExtension$.css:../css-maps/$FileNameWithoutExtension$.css.map
The problem is that it still outputs my-style.css.map to my css folder (and CSS file points to this map file), while in my css-maps folder it puts 2 files: my-style.css.map which looks exactly like the .css output file, and my-style.css.map.map. Yes, with double .map extension.
How can this be fixed?
Here is configuration I'm using, hope it will help:
Arguments: --sourcemap=none --no-cache --update $FileName$:../css/$FileNameWithoutExtension$.css
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