javascript - Angular 2 - 使用 LESS 和 Webpack 的样式可重用性？

Question

如何使用 Webpack 在 Angular 2 应用中重用 LESS 文件中编写的样式？

场景:

我想要一个 common.less 文件，其中包含所有组件通用的样式/样式变量。 (例如:一些与主题相关的变量)

然后，我想在每个组件样式的文件中导入这个 common.less 文件，这样我就不必在那里重写这些通用样式/样式变量。

我是 Webpack 用户。当我尝试这样做时，我从 common.less 文件中获取的内容被复制到所有特定于组件的样式文件(具有 @import 'common.less')，这是低效的。

需要帮助才能正确执行此操作。提前感谢您的帮助。

Answer 1

当您将 .less 文件加载到组件的样式中时 - 每个文件都是单独编译的，这是 LESS(SASS) 编译器的正常行为，当它从导入文件中呈现所有真实类时，您无法更改它。

所以，只有一种正确的方法可以避免它——将你的 common.less 文件拆分成几个文件，比如 app.less 和 variables.less。应用样式只包含在根组件中(通常像“app.component”或其他)，它包含所有通用类。

对于所有其他组件的 less 文件，只导入 variables.less - 只包含变量和混合的文件 - 它们不会成为最终 css 的一部分，只是真正呈现的类，仅此而已。