【Taro支持自定义postcss插件吗？我添加后未生效...】

[harrydengchao]

类似问题：#1550 #998

问题描述
在 weapp.module.postcss 中添加 postcss 插件，但是并没有生效

复现步骤

1. 安装 postcss 插件postcss-plugin-image-to-url

module: {
  postcss: {
      'postcss-plugin-image-to-url': {
          localBaseDir: '/assets/images/',
          remoteBaseLink: `${sftpPath}/ebank/images/`
        }
  }
}

[或者可以直接贴源代码，能贴文字就不要截图]

期望行为

编译时进入到 postcss-plugin-image-to-url 进行处理

报错信息

编译没有进入到 postcss-plugin-image-to-url 中

系统信息

Taro v1.2 及以上版本已添加 taro info 命令，方便大家查看系统及依赖信息，运行该命令后将结果贴下面即可。

• 操作系统: [e.g. Windows 10]
• Taro 版本 [e.g. v.1.2.15]
• Node.js 版本 [e.g. v10.13.0]
• 报错平台 [weapp]

[taro-bot]

欢迎提交 Issue~

如果你提交的是 bug 报告，请务必遵循 Issue 模板的规范，尽量用简洁的语言描述你的问题，最好能提供一个稳定简单的复现。🙏🙏🙏

如果你的信息提供过于模糊或不足，或者已经其他 issue 已经存在相关内容，你的 issue 有可能会被关闭。

Good luck and happy coding~

[taro-bot]

CC @luckyadam

[harrydengchao]

项目等不及了，写了个替换脚本

---

更新了一下脚本

const path = require('path')
const fs = require('fs')
const shelljs = require('shelljs')
const { sftpPath } = require('../src/api/config')

function resolve(fakepath) {
  return path.resolve(__dirname, '..', fakepath)
}

function update(rootpath) {
  fs.readdir(resolve(rootpath), 'utf8', function(err, dirList) {
    if (err) {
      throw err
    }
    dirList.forEach(function(item) {
      let stats = fs.statSync(resolve(`${rootpath}/${item}`))
      if (stats.isDirectory()) {
        // 文件夹
        if (item === 'npm') return undefined
        update(`${rootpath}/${item}`)
      } else {
        // 文件
        if (stats.size > 200 * 1024) return undefined
        fs.readFile(resolve(`${rootpath}/${item}`), 'utf8', function(err, file) {
          if (err) {
            throw err
          }
          // 文件
          let newFile = ''
          if (/\.json$/.test(item)) {
            newFile = file.replace(/(['"]{1})([./]*assets\/images\/)/g, function($0, $1) {
              return `${$1}${sftpPath}/ebank/images/`
            })
          } else if (/\.js$/.test(item)) {
            newFile = file.replace(/(['"]{1})([./]*assets\/images\/)/g, function($0, $1) {
              return `${$1}${sftpPath}/ebank/images/`
            })
          } else if (/\.wxss|\.css/.test(item)) {
            newFile = file.replace(/(url\(['"]?)([./]*assets\/images\/)/g, function($0, $1) {
              return `${$1}${sftpPath}/ebank/images/`
            })
          } else if (/\.wxml/.test(item)) {
            newFile = file.replace(/(['"]{1})([./]*assets\/images\/)/g, function($0, $1) {
              return `${$1}${sftpPath}/ebank/images/`
            })
          }
          if (newFile) {
            fs.writeFile(resolve(`${rootpath}/${item}`), newFile, 'utf8', function(err) {
              if (err) {
                console.log(err)
                throw err
              }
            })
          }
        })
      }
    })
  })
}

update('dist')
shelljs.rm('-rf', resolve('dist/assets/images'))

[luckyadam]

@harrydengchao 我们尽快支持一下 🤣

[luckyadam]

@harrydengchao 是配置这里有问题

module: {
  postcss: {
      'postcss-plugin-image-to-url': {
          enable: true,
          config: {
            localBaseDir: '/assets/images/',
            remoteBaseLink: `${sftpPath}/ebank/images/`
          }
       }
  }
}

配置项的结构是与内置的 postcss 处理插件一样的

[harrydengchao]

@luckyadam 非常感谢！ 这是我的问题，很抱歉

[harrydengchao]

@patchBig 目前 css 里面，我就是使用自己写的 postcss 插件处理的。 js 里面，用 babel 插件处理后，依然会被打包进去，所以 js 文件的引用，我是用 nodejs 脚本做的批量替换。以上

[harrydengchao]

不是，只是个外挂脚本，单独跑一遍，替换源码