Taro npm run build:alipay打包编译报错

发表于 分类于 阅读次数：

build:alipay打包编译失败

1
2
3
@import pre compile failed:
=> actual:
=> expect: ./common.acss

报错原因

因为把 @import ‘./common.acss’放到最后app.acss最后，使用压缩后@import前的换行符被删除导致的

参考https://github.com/NervJS/taro/issues/12572

解决方案

  1. 在config目录下新建ali-acss-plugin.js,文件内容为
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    import { sources } from 'webpack';


    const { RawSource } = sources;
    const COMMON_STYLE = 'common.acss';
    const APP_STYLE = 'app.acss';


    /**
     * fix: 支付宝common.acss优先级小于app.acss https://github.com/NervJS/taro/issues/12778
     * @param {Object} ctx 插件上下文
     * @param {Object} options 配置
     * @returns
     */
    export default function (ctx, options) {
      options = Object.assign({ platform: 'alipay' }, options)
      if (process.env.TARO_ENV !== options.platform) {
        return
      }


      /**
       * 修改编译后文件
       */
      ctx.modifyBuildAssets(({ assets }) => {
        /**
         * 新增app.acss用以导入全局及公共样式
         */
        if (!assets[APP_STYLE]) {
          assets[APP_STYLE] = new RawSource(`@import './global.acss';\n@import './common.acss';\n`);
        }
        /**
         * 防止common.acss为空的情况
         */
        if (!assets[COMMON_STYLE]) {
          assets[COMMON_STYLE] = new RawSource('');
        }
      })


      /**
       * 修改miniCssExtractPlugin配置:将app.acss改名为global.scss
       */
      ctx.modifyWebpackChain(({ chain }) => {
        chain.plugin('miniCssExtractPlugin').tap(args => {
          args[0].filename = function(pathData) {
            if (pathData.chunk.name === 'app') {
              return 'global.acss'
            }
            return '[name].acss'
          }
          return args
        })
      })
    }
    2.使用插件，修改config/index.js
    1
    2
    3
    4
    5
    6
    7
    import path from "path";
    const config = {
      ...
      plugins: ['@tarojs/plugin-html',path.join(__dirname,'ali-acss-plugin.js')],
      ...
    }