Open
Description
Steps to reproduce
Steps:
1.yarn dev
2.save any css for pigment-css on vscode
3.not reflected saved css on the display
When I change color: "blue" to color: "red" then save it on the vs code editor, next fast refresh doesn't work(check the enviroment).
If i refresh browser, it will be changed.
So how can i solve this problem?
Current behavior
not reflected saved css on the display(no work next fast refresh)
Expected behavior
when save on vscode, work next fast refresh
Context
No response
Your environment
//package.json
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "PORT=3001 next",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"@emotion/react": "^11.13.3",
"@emotion/styled": "^11.13.0",
"@mui/material": "^6.1.6",
"@pigment-css/nextjs-plugin": "^0.0.25",
"@pigment-css/react": "^0.0.25",
"destyle.css": "^4.0.1",
"next": "15.0.2",
"react": "19.0.0-rc-02c0e824-20241028",
"react-dom": "19.0.0-rc-02c0e824-20241028"
},
"devDependencies": {
"@types/node": "^20",
"@types/react": "^18",
"@types/react-dom": "^18",
"eslint": "^8",
"eslint-config-next": "15.0.2",
"postcss": "^8",
"tailwindcss": "^3.4.1",
"typescript": "^5"
}
}
//next.config.ts
import type { NextConfig } from "next";
import { withPigment } from "@pigment-css/nextjs-plugin";
const nextConfig: NextConfig = {
presets: [],
/* config options here */
};
export default withPigment(nextConfig);
//AdminLayout.tsx
"use client";
import { css } from "@pigment-css/react";
export default function AdminLayout() {
const visuallyHidden = css({
color: "blue",
});
return <div className={visuallyHidden}>あ</div>;
}
//page.tsx
import AdminLayout from "@/src/components/admin/common/AdminLayout";
import { Metadata } from "next";
export const metadata: Metadata = {
title: "",
};
export default function UsersPage() {
return (
<div>
<AdminLayout></AdminLayout>
</div>
);
}
Search keywords: fast refresh nextjs