ignoreImports option does not seem to work with ~@angular/material/theming imports.

[MalumAtire832]

Describe the bug
ignoreImports option does not seem to work with ~@angular/material/theming imports.

To Reproduce
toolbar.component-theme.scss

@import "~@angular/material/theming";

@mixin htg-toolbar-theme($theme) {

  $primary: map-get($theme, primary);

  .htg-toolbar {
    background-color: mat-color($primary);
  }
}

components.scss

@import "../htg-navigation/components/toolbar/toolbar.component-theme";

@mixin component-themes($theme, $company-logo) {
  @include htg-toolbar-theme($theme);
}

index.scss

@import "components";

scss-bundle.config.json

{
  "bundlerOptions": {
    "entryFile": "./src/lib/scss/index.scss",
    "rootDir": "./src/lib/",
    "outFile": "dist/shared-components/bundled.scss",
    "ignoreImports": ["~@angular/.*"],
    "logLevel": "debug"
  }
}

Expected behavior
The ~@angular/material/theming imports should be ignored and the files should be bundled.

Package version: v3.0.2
Node version: v12.13.0
OS: Windows 10 - 1903

[jefferywroblewski-accesso]

It appears that the ignoreImports option has been renamed to ignoredImports (notice the d)

I included the following property and value in my scss-bundle.config.json and the outFile did not contain any material scss code:

"ignoredImports": ["~@angular/.*"],

[MalumAtire832]

@jefferywroblewski-accesso Might this be for a newer version? My version does not seem to know the ignoredImports option when used in the CLI, it specificly says so.

As for the issue at hand, i seem to have fixed it.
I was running scss-bundle from the projects/myproject directory, with the rootdir also set to this directory. This meant it could not find my node_modules 2 directories up. While messing around i got the hint 'found tilde import but no node_modules found.'

The solution for me was to move the scss-bundle.config.json to the root of my workspace and change some values:

{
  "bundlerOptions": {
    "entryFile": "projects/shared-components/src/_theme.scss",
    "outFile": "dist/shared-components/bundled.scss",
    "rootDir": "",
    "ignoreImports": ["~@angular/.*"],
    "logLevel": "debug"
  }
}

Everything is now working like it should now that scss-bundle can find my node_modules.
Maybe someone else can verify this issue, because the error message is very misleading if this is the case. I'll leave this issue open for any possible feedback for the time beeing.

[the-ult]

Same problem occurs here.

having a projects/my-project/scss-bundle.config.json and running:
"build:theming:scss": "scss-bundle --project='./projects/my-project'", does not work.

Moving the scss-bundle.config.json to the root fixes it.
But I would love to have the config in de project root instead of the workspace root. (we have multiple projects)

---

--project: Project location where scss-bundle.config.json and node_modules are located.

Would be nice if this was separated: node_modules default from root or something? (or a separate option)

[jefferywroblewski-accesso]

@MalumAtire832 , My mistake. The ignoredImports was only available in previous versions (I was using 2.5.1). I installed the latest version (which is 3.0.2 at the time of this post) and discovered the configuration scheme was refactored between the two versions. The old ignoredImports property was removed and replaced with the bundlerOptions.ignoreImports property.

I was able to get this working where it is only ignoring the @angular imports using the same approach that you used. Thanks for the comment which reminded me to look for an updated version. 👍

[MartynasZilinskas]

Hey @the-ult and @MalumAtire832. If I understood correctly, you having issues with configuration file location and where exactly node_modules are.

I have published a new canary version. It has CLI flag --config and project property in bundlerOptions.

$ npm install [email protected] -D

I think another issue is somewhat related #74.

[the-ult]

Thanks @MartynasZilinskas will give it a try tomorrow

[MalumAtire832]

@MartynasZilinskas The combination of the --config and project options seems to work for me:

{
  "bundlerOptions": {
    "entryFile": "./projects/shared-components/src/_theme.scss",
    "rootDir": "./projects/shared-components/src",
    "project": "../../",
    "outFile": "./dist/shared-components/theme.scss",
    "ignoreImports": ["~@angular/.*"],
    "logLevel": "debug"
  }
}

Thank you for this!

I only noticed one thing:

The project option seems to expect a path relative from the specified rootDir; am i correct in this?
Because the entryFile seems to require a path relative from the directory where scss-bundle was called.

For example;

• Setting project equal to ./ does not work; same import error.
• Setting entryFile equal to _theme.scss does not work, file not found error.

Is this the expected behavior? Because it strikes me as a bit odd.

[MartynasZilinskas]

@MalumAtire832 I think I know where is the problem. Could you test with new canary version ([email protected])?

[chimiwangchuk]

@jefferywroblewski-accesso ignoreImports is not working for ~@material/.*

  {
    entryFile: 'libs/theme/src/lib/safire-theme.scss',
    outFile: 'libs/theme/dist/theme.scss'
  },

  {
    entryFile: 'libs/theme/src/lib/utilities.scss',
    outFile: 'libs/theme/dist/utilities.scss'
  },

  {
    ignoreImports: ['~@material/.*'],
    entryFile: 'libs/components/button/src/scss/button.scss',
    outFile: 'libs/components/button/src/dist/button-theming.scss'
  }

];
Am using "scss-bundle": "^3.0.2",

[mvmjacobs]

Thanks @MartynasZilinskas! I'm using [email protected] with --config flag and project property and it's working fine for me. This is my .config.json:

{
  "bundlerOptions": {
    "entryFile": "./src/components/src/components.theme.scss",
    "rootDir": "",
    "project": "../../",
    "outFile": "./dist/components/theming.scss",
    "ignoreImports": [
      "~@angular/.*"
    ],
    "logLevel": "debug"
  }
}

[PapaNappa]

I am using the same config with [email protected] and it's not working:

There is an error in your styles:
Can't find stylesheet to import.
  ?
1 ¦ @import '~@angular/material/theming';
  ¦         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ?
  stdin 1:9  root stylesheet on line (1, 9)

Why is it even trying to resolve the file if it's specifically ignored?

[dankellett]

This still seems to be an issue in 3.1.1 even when following the guidance above.

Calling from workspace root (where node_modules) is and setting project config to "./" or leaving blank does not solve the problem.