search

agneym / preact-cli-tailwind

Preact CLI Plugin that helps add Tailwind CSS to your project
MIT License
32 stars 4 forks source link

When I upgrade to preact-cli 3.2.* and preact-cli-tailwind 3, It can not support webp file load with url() function #14

Closed andares closed 2 years ago

andares commented 3 years ago

Excuse me, I have a problem when upgrade version.

I add theme setting in tailwind.config.js like this:

module.exports = {
    theme:
        extend: {
            backgroundImage: _theme => ({
                profilebg: "url('/assets/images/sample/profile-bg/l_note1.webp')",
                d_profilebg: "url('/assets/images/sample/profile-bg/d_note2.webp')",
            }),
        }
    }
}

before upgrade preact-cli, it's work, and after it throw error:

✖ ERROR ./assets/images/sample/profile-bg/d_note2.webp 1:6
Module parse failed: Unexpected character '' (1:6)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)
 @ ./style/index.css 11:0-92 19:73-102
 @ ./style/index.css
 @ ./index.js
 @ ../node_modules/preact-cli/lib/lib/entry.js

jpg file is ok 😂

agneym commented 3 years ago

I don't think this is an issue with preact-cli-tailwind. But keeping this open in case someone can help.

freddiemixell commented 2 years ago

In case someone else sees this: the problem isn't preact-cli-tailwind.

The problem is your build system doesn't accept webp. You have to extend it to add that functionality with file-loader most likely.