🐙
next.jsでscssを使ってtailwindがロードできない時の解決方法
あほすぎて毎回忘れるので備考録として書いておきます
next.congig.js
に下記を追加
next.config.js
const path = require("path");
const nextConfig = {
sassOptions: {
includePaths: [path.join(__dirname, "styles")],
},
//...other config
}
module.exports = nextConfig;
postcssをインストール
yarn add postcss
# or
npm i postcss
postcssの設定をrootディレクトリ内にpostcss.config.jsで設定
postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
// 以下任意のプラグイン
autoprefixer: {
grid: false,
},
},
};
これでもダメな場合
tailwindcssの対象ファイルを設定し忘れている可能性あり
tailwind.config.js
に下記を設定
tailwind.config.js
module.exports = {
content: ["pages/**/*.{js,ts,jsx,tsx}", "components/**/*.{js,ts,jsx,tsx}"],
//...other config
}
それでもダメな場合
そもそもscssを読み込んでいるか確認
_app.tsx
import "styles/hoge.scss"
//...other import
postcss-importを使用している場合下記を設定すると治る場合アリ
styles配下の任意のscssファイルでロードしているtailwindcssのimport方法を下記に変更
変更前
styles/foge.scss
@tailwind base
@tailwind components;
@tailwind utilities;
↓
変更後
styles/foge.scss
@improt "~tailwindcss/base"
@improt "~tailwindcss/components"
@improt "~tailwindcss/utilities;"
Discussion