首页 新闻 会员 周边 捐助

angular: how to import compiled less in typescript using esbuild

0
悬赏园豆:30 [已解决问题] 浏览: 39次 解决于 2025-02-04 12:39

这是园子博客后台的一个实现场景,在 typescript 中引用 less 样式文件作为字符串,用于配置 tinymce 编辑器。

之前在 angular 15 中基于 webpack + less-loader 实现,详见之前的博问 angular 项目改用 esbuild 后如何迁移 extra-webpack.config.js

对应的 ts 代码如下(tinymce5.styles.ts):

import _contentStyle from './tinymce5.content.less';
export const contentStyle = _contentStyle as string;

模块定义文件(tinymce5.content.d.ts):

declare module "*.less" {
    const content: string;
    export default content;
}

如果没有 .d.ts 文件,typescript 会报错:

Cannot find module './tinymce5.content.less' or its corresponding type declarations.

webpack 在 build 时会将 tinymce5.content.less 编译成 css 文件,并将 css 文件内容作为字符串赋值给 _contentStyle

现在博客后台升级到 angular 19 后,build 引擎由 webpack 换成了 esbuild,tinymce5.styles.ts 不能按期望的结果进行 build,运行时 contentStyle 的内容却是这样的:

./media/tinymce5.content.less

请问如何解决?

dudu的主页 dudu | 高人七级 | 园豆:27977
提问于:2025-02-03 18:50
< > 人人可用的开源BI工具
分享
最佳答案
0

通过改进 esbuild-plugin-lesslessLoader 解决了,详见 PR https://github.com/iam-medvedev/esbuild-plugin-less/pull/147

在 angular 项目中实现 inline-less-loader.ts

const loaderOptions: LoaderOptions = {
    filter: /tinymce5\.content\.less$/,
    inline: true
};

const inlineLessLoader: Plugin = lessLoader({}, loaderOptions);
export default inlineLessLoader;

在 angular.json 的 build 配置部分添加 inline-less-loader.ts

"build": {
  "builder": "@angular-builders/custom-esbuild:application",
  "options": {
    "plugins": [
      "./build/esbuild/inline-less-loader.ts"
    ]
  }
}
dudu | 高人七级 |园豆:27977 | 2025-02-04 12:38

PR 已经被作者 merge 并且发布了 esbuild-plugin-less 1.3.16

dudu | 园豆:27977 (高人七级) | 2025-02-04 19:41
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册
Top