解決したい問題
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の圧縮オプションを設定する方法
やったこと
cssnano
とpostcss-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
の記述方法についてはあまり自信がありません。
プラグインの記述方法について記載されたドキュメントがありましたらそちらも共有いただければありがたいです。
以上になります。どうぞよろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。