support: unable to resolve imports

acalvo commented 3 years ago

Hey! I just discovered this project and looks amazing... but tried to run it with no luck. I suppose it's a matter of configuration, but couldn't figure it out with the README.

Thing is that my Angular app has src/scss/variables/_*.scss files (for example _colors.scss) that we import from component styles in this way:

@import '~scss/variables/colors';

So that we can use the color palette variables in that component, among other things.

I tried to run ngx-unused-css with this config:

{
  "path": "src/app",
  "ignore": [
    ".mat-"
  ],
  "globalStyles": "src/scss/styles.scss",
  "styleExt": ".scss"
}

The paths are correct (the app code is in that folder, the global style in that path, etc.). When I run npx ngx-unused-css I get a ton of these errors:

Error: Can't find stylesheet to import.
  ╷
1 │ @import '~scss/variables/colors';
  │         ^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  src/app/xxx/xxx.scss 1:9  root stylesheet
    at Object._newRenderError (/Users/alberto/.npm/_npx/f8873a1e148e1b85/node_modules/sass/sass.dart.js:13537:19)
    at Object._wrapException (/Users/alberto/.npm/_npx/f8873a1e148e1b85/node_modules/sass/sass.dart.js:13374:16)
    at StaticClosure._renderSync (/Users/alberto/.npm/_npx/f8873a1e148e1b85/node_modules/sass/sass.dart.js:13349:18)
    at Object.Primitives_applyFunction (/Users/alberto/.npm/_npx/f8873a1e148e1b85/node_modules/sass/sass.dart.js:1089:30)
    at Object.Function_apply (/Users/alberto/.npm/_npx/f8873a1e148e1b85/node_modules/sass/sass.dart.js:6007:16)
    at _callDartFunctionFast (/Users/alberto/.npm/_npx/f8873a1e148e1b85/node_modules/sass/sass.dart.js:7676:16)
    at Object.renderSync (/Users/alberto/.npm/_npx/f8873a1e148e1b85/node_modules/sass/sass.dart.js:7654:18)
    at Object.compileSCSS [as default] (/Users/alberto/.npm/_npx/f8873a1e148e1b85/node_modules/ngx-unused-css/dist/src/main/compileSCSS.js:22:33)
    at Object.<anonymous> (/Users/alberto/.npm/_npx/f8873a1e148e1b85/node_modules/ngx-unused-css/dist/src/main/findUnusedCss.js:23:52)
    at step (/Users/alberto/.npm/_npx/f8873a1e148e1b85/node_modules/tslib/tslib.js:141:27) {
  formatted: "Error: Can't find stylesheet to import.\n" +
    '  ╷\n' +
    "1 │ @import '~scss/variables/colors';\n" +
    '  │         ^^^^^^^^^^^^^^^^^^^^^^^^\n' +
    '  ╵\n' +
    '  src/app/xxx/xxx.scss 1:9  root stylesheet',
  line: 1,
  column: 9,
  file: '/Users/alberto/xxx/xxx/xxx.scss',
  status: 1
}

I tried to set different values for includePaths with no luck. Can you point me in the right direction? Thanks!

maxisam commented 3 years ago

I think you should just remove ~ I have the same import statement and it works

acalvo commented 3 years ago

I think you should just remove ~ I have the same import statement and it works

Thanks for the suggestion! But tried it and didn't work... Your config file is similar to what I put, then? Isn't there some config I might be missing? I might try a min repro then to isolate and locate the problem...

acalvo commented 3 years ago

Actually, it works! Just substituted

@import '~scss/variables/colors';

with

@import 'src/scss/variables/colors';

Thanks for the tip, @maxisam :)

ivanblazevic / ngx-unused-css

support: unable to resolve imports #23