在每个角度组件模板中导入相同的.less文件?

时间:2018-03-19 20:55:17

标签: angular less

在我的角色cli项目中,我有:

角cli.json:

"styles": [ "styles/styles.less" ],

styles.less:

@import 'general';

general.less:

.pointer {
  cursor: pointer;
}

组件的样式.less 我使用mixin:

.homeblocks .block{
    .pointer;
}

我必须在每个模板文件中进行导入(无法找到其他方式):

@import '../../styles/general.less';

如果我没有导入它,我会收到错误:.pointer is undefined

  • 现在,如果我想使用较少的全局变量或mixins 文件,我必须在每个组件中导入它吗?

  • 这是否会在每个组件中创建样式重复?

1 个答案:

答案 0 :(得分:3)

请注意,mixinsvariables仅存在于css processor级别(在less级别的情况下)。然后将它们处理为css。拥有它意味着在编译期间需要解决的任何事情都需要在需要使用它的每个文件上导入。最终样式表仅在处理所有css processor文件时构建和组合。当你将它们分成部分时,它们不知道已经声明了什么。

关于复制样式,我担心这是样式封装的缺点之一。这也意味着您需要注意每个组件样式表中的import。组件的每个实例都具有完全相同的导入和样式。如果你在广泛使用的组件中import bootstrap,它可能会非常糟糕。理想情况下,组件样式表应该只具有非常特定的小样式。

您必须避免这种情况的一种方法是不使用封装,避免使用styleUrls并以旧方式编写样式表。让less执行为

设计的内容