[Bug] Unable to import LESS files from node_modules via '~'

Type of Issue

[x] Bug Report
[ ] Feature Request

Description

When trying to compile a library with components that have LESS styles and import other LESS styles from node_modules via ~ syntax (@import '~ng-zorro-antd/input/style/index.less') getting error:

FileError: '~ng-zorro-antd/input/style/index.less' wasn't found. Tried -
$PROJECT_PATH\~ng-zorro-antd\input\style\index.less,
$PROJECT_PATH\~ng-zorro-antd\input\style\index.less,
$PROJECT_PATH\~ng-zorro-antd\input\style\index.less,
npm://~ng-zorro-antd\input\style\index.less,
~ng-zorro-antd\input\style\index.less
in $PROJECT_PATH\test.component.less on line 1, column 1:
1 @import '~ng-zorro-antd/input/style/index.less';

How To Reproduce

• Generate a library with ng-packagr as builder (using NX schematics ng g @ngwl/angular:library lib --publishable)
• Create a component with less styles (ng g component test --style less --project=lib)
• In the generated LESS file add import with ~ syntax (@import '~ng-zorro-antd/input/style/index.less')
• Run the build ng build lib

Expected Behaviour

It should be able to compile LESS with same import syntax as default Angular builder does via webpack

Version Information

$ node_modules/.bin/ng-packagr --version
ng-packagr:            9.0.0-rc.8
@angular/compiler:     9.0.0-rc.14
rollup:                1.31.0
tsickle:               0.38.0
typescript:            3.7.5
node: 12.3.1
npm/yarn: 6.10.3

Please note that previously ng-packagr was able to build with this imports as it was passing configuration flag to the LESS compiler: --less-plugin-npm-import="prefix=~", reference: https://github.com/ng-packagr/ng-packagr/blob/2eac5bf83e91f4ddf752560774b03381fd7a51a9/src/lib/ng-v5/entry-point/resources/stylesheet-processor.ts#L59

But at some point that flag was removed and so imports like this no longer work.

P.S. This issue was raised back in 2017 by https://github.com/ng-packagr/ng-packagr/issues/227 and got fixed in 2018 by https://github.com/ng-packagr/ng-packagr/pull/1036 with the help of the flag I showed above but since then it was dropped and now it is broken again, see: https://github.com/ng-packagr/ng-packagr/blob/3446d60b5a0e8ee1b39f464c2f867a46978c8ee8/src/lib/styles/stylesheet-processor.ts#L78

P.P.S. May a PR be a good idea to submit or are there any valid reasons why the flag was removed?

[gund]

Well the use-case is like this:

• I develop an angular component library using LESS
• I do build it with ng-packagr
• I also use storybook (@storybook/angular) to render components

And when storybook builder works - it uses by default webpack config from @angular-devkit/build-angular:browser to build storybook. And of course the build will only work either for storybook (when using ~) or only for ng-packagr (when not using ~).

As you can see it is important to make the import syntax the same for both builders (and I don’t mind dropping ~).

But it seems easier to add this flag to lessc than modify webpack config of @angular-devkit/build-angular builder.

P.S. For now I actually did modify webpack config from @angular-devkit/build-angular for the storybook by adding paths to options of less-loader which activates default Node resolution for imports in LESS. This is still kinda hacky that is why I would like to discuss any other possible solutions here (or maybe creating issue in angular to remove ~ import syntax?).

Add paths to `less-loader`:

module.exports = config => {
  // Extract LESS rule
  const lessRule = config.module.rules.find(rule =>
    rule.test.toString().endsWith('.less$/'),
  );

  // Extract LESS loader
  const lessLoader = lessRule.use.find(l => l.loader.includes('less-loader'));

  // Add paths to activate default LESS resolution
  lessLoader.options = lessLoader.options || {};
  lessLoader.options.paths = [
    path.resolve(__dirname, 'node_modules')
  ];

  return config;
}

P.P.S. Also I wanted to mention that you do use node-sass-tilde-importer for SASS/SCSS files which clearly shows the intention to be compatible with default angular cli builders. So it will be not right to leave LESS imports broken in this way…

[alan-agius4]

Kindly see breaking changes https://github.com/ng-packagr/ng-packagr/blob/master/CHANGELOG.md

This syntax was dropped in favor of native LESS node module resolution rather than a non standard Webpack like module resolutions.