动态样式注入 - H5

注入不同类型的样式文件。

如何使用

安装

pnpm add @plugin-light/webpack-loader-inject-dynamic-style-web -D

在 vue.config.js 中添加如下设置：

const { LOADER: injectDynamicStyleWeb } = require('webpack-loader-inject-dynamic-style-web')';

module.export = {
  chainWebpack(config) {
    config.module
      .rule('inject-dynamic-style')
      .test(/(css\/base\.scss)$/)
      .use(injectDynamicStyleWeb) 
      .loader(injectDynamicStyleWeb)
      .end();
  }
}

参数

export type IInjectDynamicStyleWebOptions = {
  // 顶层元素，，默认 body
  topElement?: string;

  // 处理的平台, 默认 ['h5']
  platforms?: Array<string>;
};

说明

该 loader 会在base.scss文件中注入以下样式，使得页面可以动态显示不同类型的样式。

const styleStr = styleList.map(item => `
&--type-${item} {
  @import './${item}.scss';
}`).join('\n');

const content = `
/* #ifdef H5 */
body.${componentName} {
  ${styleStr}
}
/* #endif */
`;