diff --git a/packages/plugin-compiler-web/package.json b/packages/plugin-compiler-web/package.json index 383e4e3c..c4d5b742 100644 --- a/packages/plugin-compiler-web/package.json +++ b/packages/plugin-compiler-web/package.json @@ -34,6 +34,7 @@ "@morjs/plugin-compiler-alipay": "1.0.106", "@morjs/runtime-web": "1.0.108", "@morjs/utils": "1.0.71", - "postcss": "7.0.39" + "postcss": "7.0.39", + "postcss-import-sync": "7.1.4" } } diff --git a/packages/plugin-compiler-web/src/compiler/core/acss/index.ts b/packages/plugin-compiler-web/src/compiler/core/acss/index.ts index fb4f8910..08ac267c 100644 --- a/packages/plugin-compiler-web/src/compiler/core/acss/index.ts +++ b/packages/plugin-compiler-web/src/compiler/core/acss/index.ts @@ -1,4 +1,6 @@ +import path from 'path' import postcss from 'postcss' +import atImport from 'postcss-import-sync' import { defCondition, isEndIf, isIfDef } from '../../utils/comment' import { getExternalComponent, isEnableStyleScope } from '../../utils/index' import { globalComponentName, randomHash } from '../option' @@ -38,6 +40,13 @@ export default function (source: string, options: AcssOptions) { ) } + if (options.enableCombineImportStyles) { + plugins.unshift( + PostcssStylePathPlugin({ path: options.resourcePath }), + atImport() + ) + } + if (syntax && typeof syntax === 'object') { config.syntax = syntax } @@ -131,6 +140,23 @@ const ComponentNameMapPlugin = postcss.plugin( } ) +interface PostcssStylePathOptions { + path: string +} +const PostcssStylePathPlugin = postcss.plugin( + 'postcss-style-path-plugin', + function (options: PostcssStylePathOptions) { + return function (root) { + root.nodes.forEach((rule) => { + if (rule.type === 'atrule') { + const dirname = path.dirname(options.path) + return (rule.params = path.resolve(dirname, JSON.parse(rule.params))) + } + }) + } + } +) + function mapComponentName(selector, options: AcssOptions) { const arr = selector.split(':') const name = arr[0] diff --git a/packages/plugin-compiler-web/src/compiler/core/acss/options.ts b/packages/plugin-compiler-web/src/compiler/core/acss/options.ts index 3ef9434b..c49f0583 100644 --- a/packages/plugin-compiler-web/src/compiler/core/acss/options.ts +++ b/packages/plugin-compiler-web/src/compiler/core/acss/options.ts @@ -4,4 +4,5 @@ export interface AcssOptions extends BuildOptions { plugins?: string[] needRpx?: boolean // 是否需要rpx 转换。默认true syntax?: any // 自定义语法处理程序 + enableCombineImportStyles?: boolean // 是否需要解析@import导入的样式 } diff --git a/packages/plugin-compiler-web/src/constants.ts b/packages/plugin-compiler-web/src/constants.ts index d4d8152c..368427e7 100644 --- a/packages/plugin-compiler-web/src/constants.ts +++ b/packages/plugin-compiler-web/src/constants.ts @@ -162,6 +162,10 @@ export const UserConfigSchema = z.object({ // 供运行时获取及消费 appConfig: z .object({ + /** + * 用于将样式文件中 @import 样式的内容写入到样式文件中 + */ + enableCombineImportStyles: z.boolean().default(false), /** * 用于传递业务对某个组件的特殊配置, 比如 map 组件传递 key */ diff --git a/packages/plugin-compiler-web/src/plugins/commonConfigPlugin.ts b/packages/plugin-compiler-web/src/plugins/commonConfigPlugin.ts index b000d40f..631955b7 100644 --- a/packages/plugin-compiler-web/src/plugins/commonConfigPlugin.ts +++ b/packages/plugin-compiler-web/src/plugins/commonConfigPlugin.ts @@ -245,7 +245,7 @@ export class CommonConfigPlugin implements Plugin { .test(/\.(wx|a?c)ss$/) .use('web-style') .loader(WEB_COMPILER_LOADERS.style) - .options(WEB_LOADER_OPTIONS) + .options({ enableCombineImportStyles: web?.appConfig?.enableCombineImportStyles, ...WEB_LOADER_OPTIONS }) .before('style') .end()