2

I have the following problem related to the custom Angular schematics file name.

I want to create a theme scss file that starts with underscore and immediately after it I want to use a double underscore as a delimiter which separates name variable from rest of the normal string.

For example, I want to create a component structure with a file _mouse-theme.scss and the only way I can do it is by using the name variable __name@dasherize-theme.scss. The problem is, that it will create mouse-theme.scss and not _mouse-theme.scss. I tried to use three underscores, but then the name variable seems to be undefined. Is there a way to use it with three underscores and the first underscore to be treated as a string, or to escape it somehow?

Thanks in advance!

Darko Andreev
  • 33
  • 5

1 Answers1

3

The @dasherize will always transform the file name into the dasherized-file-name-format

However if you name your file something like __fileName__-theme.scss then you can do:

_options.fileName = '_' + dasherize(_options.name);

in your schematic function, and the file name will be both dasherized, and prefixed by a _

hvassup
  • 159
  • 5
  • This will add an underscore prefix to every file name (spec, component, html, etc.) and I want to add a prefix only to the theme (scss) file. @hvassup – Darko Andreev May 27 '20 at 17:02
  • Then I suggest only using that notation for the scss files and using your notation for the rest – hvassup May 27 '20 at 17:04
  • But how can I know which one is .ts and which one is .scss file? I don't have file extension in my options schema, I only have generated file name. What do you suggest exactly? – Darko Andreev May 27 '20 at 17:12
  • What does your file structure look like? – hvassup May 27 '20 at 17:15
  • 1
    I have a files folder in my custom schematics project and inside the folder i have a following structure: \_\_name@dasherize\_\_.ts, \_\_name@dasherize\_\_.html, \_\_name@dasherize\_\_.spec.ts, \_\_name@dasherize\_\_-theme.scss etc. I want the theme.scss file to be prefixed with one extra underscore and if I set it like \_\_\_name@dasherize\_\_-theme.scss it throws an error with undefined name variable (three underscores as a prefix) – Darko Andreev May 27 '20 at 17:20
  • 1
    Alright, then you keep all files, except scss, as they are, and rename the scss file to `__fileName__-theme.scss`. Then, in your schematic function, you create a new variable in your options object called `fileName` like above – hvassup May 27 '20 at 17:23
  • Yes, you're right and that is a valid approach, but the point here is if I can prefix the only file I want and with only one variable in my options object. If I do it with extra variable, the questions in the terminal for generating components will be: 1. Component name: (you type the name) and then the second question will be 2. Theme file name: (you type the file name with "_" prefix) It's not really practical. I want to do it with my single property component **name** – Darko Andreev May 27 '20 at 17:30
  • By using this approach you only have to type the `name` property in the terminal, as the `fileName` property is created by using the `name` property – hvassup May 27 '20 at 17:33
  • I think I get it now. You want to use the variable `__fileName` as a help variable and then to assign the **name** variable to my extra **fileName** variable – Darko Andreev May 27 '20 at 17:35
  • That is useful hack, but I think it should be added directly to the file name and not to use an extra variable, but that feature we need to request from Angular team :) – Darko Andreev May 27 '20 at 17:42