質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.46%
Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

2824閲覧

Next.jsのcssのminify設定変更方法について

mosana

総合スコア16

Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/11/09 13:38

解決したい問題

next buildすると、cssがminifyされ、font-familyで指定した値のクォーテーションが削除されてしまい、正しくフォントが適応されない。

環境

  • node v12.18.0
  • yarn v1.22.5
  • next v10.0.1

原因の考察

Next.jsでデフォルト設定されているpostcssのminify設定が原因と考えています。
公式参考

教えてほしいこと

Next.jsでcssの圧縮オプションを設定する方法

やったこと

cssnanopostcss-minify-font-valuesの設定を試みました。
どちらとも、または、どちらかのプラグインを設定してみましたが、結果は変わりませんでした。

設定方法

ルートディレクトリに配置したpostcss.config.jsにてこのように記述しました。
※プラグイン名をtypoするとnext build時にエラーが吐かれたため、記述した内容は読み込まれてはいるはずです。

js

1module.exports = { 2 plugins: [ 3 'postcss-flexbugs-fixes', 4 [ 5 'postcss-preset-env', 6 { 7 autoprefixer: { 8 flexbox: 'no-2009', 9 }, 10 stage: 3, 11 features: { 12 'custom-properties': false, 13 }, 14 }, 15 ], 16 //↑ここまではNext.jsのデフォルトです。 17 [ 18 'cssnano', 19 { preset: ['default', { minifyFontValues: { removeQuotes: false } }] }, 20 ], 21 [ 22 'postcss-minify-font-values', 23 { 24 removeQuotes: false, 25 }, 26 ], 27 ], 28} 29

# その他わからないこと
postcss.config.jsをどのように変更しても、結局cssがminifyされます。
Next.jsにてcssのminifyはどのように行われているのでしょうか。

その他、postcss.config.jsの記述方法についてはあまり自信がありません。
プラグインの記述方法について記載されたドキュメントがありましたらそちらも共有いただければありがたいです。

以上になります。どうぞよろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

無理やり_document.jsxにて、

jsx

1<style 2 dangerouslySetInnerHTML={{ 3 __html: String.raw` 4 .font-a1{ 5 font-family: 'A1 Mincho', serif; 6 } 7 `, 8 }} 9/>

のように定義してクォーテーションを保つことが出来ました。

が、理想的な解決方法ではないので引き続き回答をよろしくお願いいたします。

投稿2021/03/18 05:54

mosana

総合スコア16

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問