I have a specific structure set up in my styles folder within the project directory. It includes three subfolders: css, scss, and css-maps. My goal is to automatically update a corresponding CSS file in the css folder and a .css.map file in the css-maps folder whenever I make changes to a SCSS file in the scss folder.
|styles
|css
my-style.css
|css-maps
my-style.css.map
|scss
my-style.scss
To achieve this, I have configured an SCSS watcher in IntelliJ with 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
However, I am encountering an issue where the generated map files are not placed correctly. The CSS file points to the wrong .map file in the css folder, while two map files are generated in the css-maps folder - one with the correct content and another with a double .map extension (e.g., my-style.css.map.map).
What steps can I take to resolve this problem?