Skip to content
This repository has been archived by the owner on Apr 2, 2022. It is now read-only.

Add Next.js Built-in CSS support #31

Closed
wants to merge 1 commit into from

Conversation

p-chan
Copy link

@p-chan p-chan commented Jul 4, 2020

Changes and Fixes

  • [Fix] Add Next.js Built-in CSS support

Note (en)

  1. Next.js upgraded from 9.1.1 to 9.4.4 and updated from @zeit/next-css to Built-in CSS
  2. Then, image with something like url('*.png'), is converted to a ./.next/static/media/*.png.
  3. Moreover, the contents of the file are stored in the module.export = data:image/png;base 64... or something like that.
  4. Of course, the image won't show up because it can't be properly referenced from the browser.
  5. I fixed it based on these
    a. SCSS modules cannot load images correctly with next-images package vercel/next.js#11164
    b. cyrilwanner/next-optimized-images@67697bb
    c. cyrilwanner/next-optimized-images@e5f656e

Note (ja)

  1. 私は自分のプロジェクトを Next.js 9.1.4 から Next 9.4.4 にアップデートするとともに、@zeit/next-css から Built-in CSS に移行しました
  2. すると、CSS 内の url('./*.png') のような記法で読み込んだ画像が . /.next/static/media/*.png に書き出されるようになりました
  3. しかも、ファイルのコンテンツは module.export = data:image/png;base 64... のようになっています
  4. もちろん、ブラウザから正しく参照できないので画像は表示されません
  5. 私は以下を参考に修正しました
    a. SCSS modules cannot load images correctly with next-images package vercel/next.js#11164
    b. cyrilwanner/next-optimized-images@67697bb
    c. cyrilwanner/next-optimized-images@e5f656e

@p-chan p-chan marked this pull request as ready for review July 4, 2020 00:15
@jagaapple jagaapple self-assigned this Jul 24, 2020
@jagaapple jagaapple changed the base branch from master to release/v3.0.2 July 24, 2020 02:57
@@ -64,6 +64,31 @@ module.exports = (nextConfig = {}) =>
],
});

if (config.module.rules) {
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this backward-compatible with previous version? (i.e. @zeit/next-css )
Otherwise, could you consider adding to a new option?

@jagaapple
Copy link
Owner

This approach has been adopted in #38 . Thank you.

@jagaapple jagaapple closed this Aug 2, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants