Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
harrydengchao opened this issue Apr 3, 2019 · 8 comments
Closed
Assignees

Comments

@harrydengchao
Copy link

类似问题:#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/`
        }
  }
}

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

期望行为

编译时进入到 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
Copy link

taro-bot bot commented Apr 3, 2019

欢迎提交 Issue~

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

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

Good luck and happy coding~

@taro-bot
Copy link

taro-bot bot commented Apr 3, 2019

CC @luckyadam

@harrydengchao
Copy link
Author

harrydengchao commented Apr 3, 2019

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


更新了一下脚本

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
Copy link
Member

@harrydengchao 我们尽快支持一下 🤣

@luckyadam
Copy link
Member

@harrydengchao 是配置这里有问题

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

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

@harrydengchao
Copy link
Author

@luckyadam 非常感谢! 这是我的问题,很抱歉

@harrydengchao
Copy link
Author

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

@harrydengchao
Copy link
Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants