无法使用 angular 项目中的模块名称从 node_modules 导入 .less 文件

Question

我正在尝试从打包为节点模块的自定义库中导入样式。假设包名是@custom。我打算通过以下方式从 @custom 包中导入一个 less 文件：

@import '@custom/styles/common.less'

此语句在我添加此导入语句的同一文件夹中搜索 '@custom/styles/common.less'。

ERROR in ./src/app/app.component.less
Module build failed:

@import "@custom/styles/common";
^
Can't resolve './@custom/styles/common.less' in '<path>\src\app'
      in <path>\src\app\app.component.less (line 1, column 0)

有没有办法声明 relative-path 或 module-name 以便它在节点模块文件夹中搜索？还是我遗漏了一些非常基本的东西？

Answer 1

有两种方法，如果您只需要将它们与您的项目一起编译，然后将其包含在您的 angular-cli 中，如下所示：

"styles": [
    "../node_modules/custom/styles/common.less"

如果你想在你的项目中使用 less 文件并使用它们的变量，那么你必须将它包含在你的 angular-cli 文件中，如下所示：

 "stylePreprocessorOptions": {
    "includePaths": [
      "../node_modules/custom/styles"
    ]
  },

并且在您的组件样式文件中，您可以包含较少的文件，例如 @import '../styles/<your parent less file>';

无法使用 angular 项目中的模块名称从 node_modules 导入 .less 文件

Unable to import .less file from node_modules using module-name in angular project

javascript

frontend

less

angular

angular6