Document how to map external less files

[thelgevold]

I am requesting documentation on how to map to imported less files in the webpack version of CLI.

In the previous version there was a hook in angular-cli.builds.js to specify paths for the lessCompiler:

lessCompiler: {
      paths: ['node_modules/some-path/less']
    }

angular-cli.builds.js is no longer included in the version on master.

It works to specify less files in styleUrls, but I am not able to import other less files from my component less files.

[filipesilva]

Possibly related #1465

I don't have an answer for this at the moment. @TheLarkInn can you advise if there's a solution right now?

[TheLarkInn]

Yeah its related overall. @thelgevold we need to make essentially a property that allows this for all the preprocessers we support (behind the scenes).

[thelgevold]

Thanks @TheLarkInn .
I wonder if there might be a similar issue when dealing with paths in tsconfig.json.

paths was added in TS 1.9 and is a way to create an alias to avoid long relative import paths.

If I run tsc my code compiles, but during ng build I get module not found errors, so I suspect the paths have to be "ferried" into the webpack world somehow?

[sirajc]

Maybe, mapping paths of tsconfig to resolve.alias of webpack

[clydin]

@thelgevold The webpack specific method is to prefix the name of the package with a ~.
For example, @import "~some-path/less/file";
This is probably not the long-term solution, but might get you up and running.

[TheLarkInn]

Yeah this is great in webpack land but not user land.

[clydin]

For sass/scss, there is https://github.com/lucasmotta/sass-module-importer. It supports reading a module's package.json which allows a simple @import "<package-name>". This would allow sass/scss to mimic the typescript workflow of npm install and import.

[filipesilva]

Supersedes by #1791, work in progress on #2747

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}