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

使用vite-plugin-lib-assets后vue单文件组件中scss中的图片仍然被内联了 #2

Closed
kaizige10 opened this issue Jul 10, 2023 · 5 comments
Labels
bug Something isn't working

Comments

@kaizige10
Copy link

vite.config.js:

import libAssets from '@laynezh/vite-plugin-lib-assets';
export default defineConfig({
    plugins: [
        libAssets({
            name: '[name].[contenthash:8].[ext]',
            outputPath: 'vite-img'
        }),
    ]
}

组件代码:

<style scoped lang="scss">
    .themes-red {
        background: url(../../assets/images/bg-theme-red.png) no-repeat left top / cover;
    }
</style>

结果:
image

.themes-red[data-v-c247740e]{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIIAAABQCAYAAADV9a3ZAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA39pVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQyIDc5LjE2MDkyNCwgMjAxNy8wNy8xMy0wMTowNjozOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo3M2U1ZDFmNS1hNTZkLTc0NDUtYWM1Zi1iZDYwY2YwZGM0ODYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NjVCNDM5NTNDRUExMTFFRDg3QkNERTE4QUQ4OTcxQTkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NjVCNDM5NTJDRUExMTFFRDg3QkNERTE4QUQ4OTcxQTkiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOmUxOTA4YjM0LTdiMWEtOWQ0Yi05ODczLWZiNWRjZTM4MmZkYyIgc3RSZWY6ZG9jdW1lbnRJRD0iYWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOmEwOTRiNGM0LTQwMzEtZDY0OC04NjE3LTZkYWFj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) no-repeat left top/cover}
@coder-layne
Copy link
Contributor

我看下这个问题

@coder-layne coder-layne added the bug Something isn't working label Jul 18, 2023
@coder-layne
Copy link
Contributor

看起来这是需要 postcss 来处理的场景,我找到了插件 postcss-url 来完成这项工作,插件完成了他的工作,但最后生成 css 文件中引用的地址还是被 Vite 给替换成了 base64 格式,我试了很多方法还是没能绕过,我还要更多的时间来试试,有最新的进展会尽快回复你

// posscss.config.js
const path = require('node:path')

module.exports = {
  plugins: [
    require('postcss-url')({
      url: 'copy',
      // base path to search assets from
      basePath: path.resolve('./'),
      // dir to copy assets
      assetsPath: 'img',
      // using hash names for assets (generates from asset content)
      useHash: true,
    }),
  ],
}

@coder-layne
Copy link
Contributor

我想了下,似乎可以在最终生成 css 文件前通过一波逆向操作完成这个功能,我最近会试着写个 Demo 验证下是否可行

@coder-layne
Copy link
Contributor

我想了下,似乎可以在最终生成 css 文件前通过一波逆向操作完成这个功能,我最近会试着写个 Demo 验证下是否可行

验证下来这个方案是可行的,不过存在一个缺陷:引入资源在转换成 base64 时丢失了 query 参数信息,这可能会与原本的意图产生差异

@coder-layne
Copy link
Contributor

Supported in v0.3.0

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants