我想重新使用使用 Less 的 Angular 5 元素中的一些结构。在这个旧元素中,我可以简单地从组件中使用这一行加载 .less
文件:
@import '~app/shared/less/bootstrap';
这将加载:
/my-app/src/app/shared/less/bootstrap.less
现在我有一个空白的 Angular 6 元素,它也被配置为使用 Less 作为预处理器:
ng new my-app --routing --style less
从 angular.json
中提取:
"my-app": {
"prefix": "app",
"schematics": {
"@schematics/angular:component": {
"styleext": "less"
}
},
"architect": {
"build": {
"options": {
"styles": [
"src/styles.less",
"app/shared/less/styles.less"
不过行
@import '~app/shared/less/bootstrap';
...编译错误:
Failed to compile.
./src/app/shared/component/some.component.less
Module build failed:
@import '~app/shared/less/bootstrap';
^
'~app/shared/less/bootstrap' wasn't found.
我也试过:
@import '.app/shared/less/bootstrap';
@import '.src/app/shared/less/bootstrap';
@import '~app/shared/less/bootstrap.less';
……没有任何运气。
我是不是忘了配置什么?
最佳答案
在 Angular 6 中,您必须导入
所有文件到 main(在您的情况下为 src/styles.less
)css 文件:
在 angular.json
中只放:
"styles": [
"src/styles.less"
]
在styles.less
中(在app
之前用/
导入你想要的所有文件):
@import './app/shared/less/bootstrap.less';
在这里查看我对 css 的回答:Angular 6 load css folders in angular.json
对您的编辑./src/app..
:
@import './src/app/...'
关于javascript - Angular 6 - Less CSS 的导入不再有效,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51041765/