allow importing from node_modules in a mono-repo

[LPCmedia]

Consider a mono repo project structure like:

project
|-- node_modules
|-- packages
    |--components
            |-- src
        |-- assets
               index.scss
    scss-bundle.config.json

where the configuration:

{
  "bundlerOptions": {
    "rootDir": "./src",
    "entryFile": "./src/assets/index.scss",
    "outFile": "./_themes.scss",
    "includePaths": ["./../../node_modules"],
    "ignoreImports": ["~@angular/.*"],
    "logLevel": "debug",
    "tilde": true
  }
}

and the index.scss contain an import:

@import '~@angular/material/theming';
@import './variables';
@import './theming-mixin';
@import './lib-map-overrider';

Describe the solution you'd like The imports are resolved to the to the top node modules.

the current result is a error: Can't find stylesheet to import. [12:50:54] erro: ╷ [12:50:54] erro: 363 │ @import '~@angular/material/theming';

Describe alternatives you've considered current workaround is using a relative path on the import.

Perhaps this is documentation that is missing ?

[nathanosdev]

The strange thing about this one, is if you remove the ignoreImports property from the config, then the node module is resolved correctly and is included in the bundle. It's only when you try to exclude it from the bundle that this error happens.

[NazarDzendzelyuk]

Hello Do you have any updates ? I have the same situation with ignoreImports.

@import '~@my-registry/common/dist/mixins.scss';
body {
    fonst-size: getFont(1)
}

I need to import mixins to have getFont defined but don't want to have content of mixins.scss in output file. I've added "ignoreImports": ["~@my-registry/.*"] but it causes error:

[13:27:40] erro: Can't find stylesheet to import.
[13:27:40] erro:   ╷
[13:27:40] erro: 1 │ @import '~@my-registry/common/dist/mixins.scss';
[13:27:40] erro:   │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

[alexus85]

same happened in one of my projects.

[LPCmedia]

@MartynasZilinskas are you looking for help on this one ? when is v4 planned for ?

[DovydasNavickas]

@LPCmedia, if you'd like to have a go on this, please do 👍

If you'd like us to work on this, quite a significant help would be providing a repo with a structure you're having trouble with. Or even incorporate that into tests themselves 🥇

We've also created a Gitter room for the project: https://gitter.im/reactway/scss-bundle

[MartynasZilinskas]

@LPCmedia I have released a new version (canary) which includes --config flag and project property.

$ npm install scss-bundle@0.0.0-canary.9f111cb -D

With that version you could try using this config:

{
  "bundlerOptions": {
    "project": "../../",
    "rootDir": "./src",
    "entryFile": "./src/assets/index.scss",
    "outFile": "./_themes.scss",
    "includePaths": ["./../../node_modules"],
    "ignoreImports": ["~@angular/.*"],
    "logLevel": "debug",
    "tilde": true
  }
}

[LPCmedia]

Sorry a little late here but I get an error:

[13:30:45] warn: [DEPRECATED]: Flag "project" usage as pointing to the config file directly is deprecated. [13:30:45] erro: There is an error in your styles: [13:30:45] erro: Can't find stylesheet to import. [13:30:45] erro: ╷ [13:30:45] erro: 366 │ @import '~@angular/material/theming';/ --- / [13:30:45] erro: │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ [13:30:45] erro: ╵ [13:30:45] erro: stdin 366:9 root stylesheet on line (366, 9)

Ignore doesnt do anything. And to be clear in our case we do want to provide the mixins from material.

Let me try and get you a repro this week.

[mistic100]

Same problem as @LPCmedia (I want to include bootstrap mixins from the mono-repo root node_modules).

Sticking to 3.0.2 for now which reoslves the imports correctly.

{
  "bundlerOptions": {
    "entryFile": "./index.scss",
    "outFile": "./dist/index.scss",
    "rootDir": "../../",
    "verbosity": "error"
  }
}