Is it possible to convert whole folder with convert-sass? (scss to sass)

Question

I have a bunch of files in bunch of folders in SCSS format. I need to convert it all to SASS format, and I know sass has a specific command for that convert-sass, however I am not sure whether it is possible to convert whole folder (with folders inside)?

If its possible, then how convert-sass, else maybe there is a compiler who is able to do that? Thank you upfront:)

Answer 1

Yes, sass-convert accepts a recursive argument.

If you run sass-convert --help, it will give you a list of available options. One of them is:

-R, --recursive      Convert all the files in a directory. Requires --from and --to.

So, your command should look like this:

sass-convert -R my_sass_dir --from sass --to scss

Answer 2

Here's a slighly more extensive answer:

1. go to your project subfolder, under which all your styles sit (also, because you want to leave node_modules alone, do you?)

   cd frontend/src

2. convert in place, as said (consider --indent 4 if that's your indentation style...)

   sass-convert -R . --from scss --to sass --in-place

3. you almost certainly want to rename all those .scss files to .sass (details)

   find . -name '*.scss' -exec sh -c 'mv "$0" "${0%.scss}.sass"'

4. In your .js or .jsx files, you want to adjust your import statements.

   find . -name '*.jsx' -print0 | xargs -0 sed -i "s/'\.\(.*\)\.scss'/'.\1.sass'/g"

   More specifically, only your local import statements, starting with a '.', not your global imports, i.e. pointing to node_modules… right?

   Testcase:

   import './style.scss' // should change to .sass
   import './bar.scss'   // should change to .sass
   import 'slick-carousel/slick/slick.scss' // leave me alone!
   

Remaining pitfalls are:

• Your webpack.configs (loaders!), grunt or gulpfile, still matching against .sass
• global ‘common’ imports which you might prepend…