Not found import less when ng build at error

[shoestrong]

Yesterday cloning is still good, but today is not alright?

I just did 'git clone' and 'npm install', then run 'ng serve' and I got the error!

ERROR in ./node_modules/_css-loader@0.28.8@css-loader?{"sourceMap":false,"import":false}!./node_modules/_postcss-loader@2.0.10@postcss-loader/lib?{"ident":"postcss","sourceMap":false}!./node_modules/_less-loader@4.0.5@less-loader/dist/cjs.js?{"sourceMap":false}!./src/styles.less
Module not found: Error: Can't resolve '../font/weathericons-regular-webfont.eot' in '/Users/shoestrong/Desktop/DEMO/demo/src'
resolve '../font/weathericons-regular-webfont.eot' in '/Users/shoestrong/Desktop/DEMO/demo/src'
using description file: /Users/shoestrong/Desktop/DEMO/demo/package.json (relative path: ./src)
Field 'browser' doesn't contain a valid alias configuration
after using description file: /Users/shoestrong/Desktop/DEMO/demo/package.json (relative path: ./src)
using description file: /Users/shoestrong/Desktop/DEMO/demo/package.json (relative path: ./font/weathericons-regular-webfont.eot)
no extension
Field 'browser' doesn't contain a valid alias configuration
/Users/shoestrong/Desktop/DEMO/demo/font/weathericons-regular-webfont.eot doesn't exist
.ts
Field 'browser' doesn't contain a valid alias configuration
/Users/shoestrong/Desktop/DEMO/demo/font/weathericons-regular-webfont.eot.ts doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
/Users/shoestrong/Desktop/DEMO/demo/font/weathericons-regular-webfont.eot.js doesn't exist
as directory
.......
webpack: Failed to compile.

[slobber]

I have solved this issue.
#206

[shoestrong]

@slobber Although I know angular5 'styles' problem, but do not know how to solve.Can you provide your solution? Thanks.

[slobber]

@shoestrong
Please see PR's file details.
https://github.com/cipchk/ng-alain/pull/206/files

[cipchk]

Please provider your version informations.

[shoestrong]

@slobber I have tried, but not!

"styles": [
"styles.less",
"../node_modules/font-awesome/css/font-awesome.css",
"../node_modules/simple-line-icons/css/simple-line-icons.css",
"../node_modules/weather-icons/css/weather-icons.css"
],

My file: styles.less. I commented the following code：

// web font icon
// @import '../node_modules/font-awesome/css/font-awesome.css';
// @import '../node_modules/simple-line-icons/css/simple-line-icons.css';
// @import '../node_modules/weather-icons/css/weather-icons.css';
// ng-alain
@import '~@delon/theme/styles/index';
@import "./styles/_alain-custom-variables";
@import "./styles/index";
// Third Library
@import '../node_modules/ng2-dnd/bundles/style.css';

what should I do?

[shoestrong]

@cipchk angular@5.0.0

[shoestrong]

@slobber @cipchk
I have found what is the reason.
I use 'cnpm install'.
eg:

'../node_modules/font-awesome/css/font-awesome.css'

This path can not be found.
When I use 'npm install',The style takes effect.
eg:

'../node_modules/_font-awesome@4.7.0@font-awesome/css/font-awesome.css'

Thank you all!

用英文好费劲，我总结一下吧！

1. 根据 @slobberm 描述 #206 我知道了angular 5引用外部样式不能放在styles.less中，需要把样式放在.angular-cli.json中的styles:[]这个数组中，以下是 @slobber 给的答案：

With angular 5, webpack can't locate font files correctly in styles.less. Follow Angular suggestions, move the css imports to .angular.json.

2. 同时我也查阅了css-loader，官方建议不使用@import，可参考:css-loader#import

3. 当我们在.angular-cli.json引用时，用npm安装的时候，我们会看到带下划线路径存在的（是真实路径）。利用cnpm安装的，是没有带下划线的路径的。
   cnpm： '../node_modules/font-awesome/css/font-awesome.css' // 这种仅仅是快捷方式，我没有尝试'../node_modules/.4.7.0@font-awesome/css/font-awesome.css'，不知道是否可以。
   npm： '../node_modules/_font-awesome@4.7.0@font-awesome/css/font-awesome.css'

哈哈，还是不能用轻易相信cnpm镜像啊！

[cipchk]

这个错误是Angular Cli 引起的，见 #9020，Cli 会在下一版本修复。

或使用 1.6.2 版本。

[xingkoo]

cnpm总会因为版本导致各种各样的问题，很难解决，所以最好还是使用npm。

[fsmaili77]

I had an error with the delon theme see below:
~@delon/theme/index.less' wasn't found
I saw some suggestions, like replace the symbol ' ~ ' with ' node_modules ', I have tried but didn't worked for me.
Solution:
What worked for me was that I have just deleted the symbol' ~ ' in front of ~@delon/theme/index.less, so I wrote @delon/theme/index.less

[cipchk]

~ symbol no supported in Angular13. In fact, this is Webpack related: https://github.com/webpack-contrib/less-loader#imports