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



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

angular-cli.json:

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

样式.less:

@import 'general';

一般.无:

.pointer {
cursor: pointer;
}

组件的样式中,我使用mixin:

.homeblocks .block{
.pointer;
}

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

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

如果我不导入它,我会收到一个错误:.pointer is undefined

  • 现在,如果我想使用全局变量或混合定义在 文件,我必须在每个组件中导入它吗?

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

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

关于重复的样式,恐怕这是样式封装的缺点之一。这也意味着您需要注意在每个组件样式表中import的内容。组件的每个实例都将具有完全相同的导入和样式。例如,如果您在广泛使用的组件中import bootstrap,它可能会升级得非常糟糕。 理想情况下,组件样式表应该只有少量非常具体的样式。

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

最新更新