这是园子博客后台的一个实现场景,在 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
请问如何解决?
通过改进 esbuild-plugin-less 的 lessLoader
解决了,详见 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"
]
}
}
PR 已经被作者 merge 并且发布了 esbuild-plugin-less 1.3.16
angular 19 项目 build 时报错:No loader is configured for ".less" files
– dudu 2周前