I tried vanilla-extract in next13, but the style doesn't apply

Question

I tried vanilla-extract in next13, but the style doesn't apply

next.config.js

import { createVanillaExtractPlugin } from '@vanilla-extract/next-plugin';
const withVanillaExtract = createVanillaExtractPlugin();

/\*\* @type {import('next').NextConfig} \*/
const nextConfig = {};

export default withVanillaExtract(nextConfig);

package.json

{
"name": "my-app",
"version": "0.1.0",
"private": true,
"type": "module",
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"@types/node": "20.5.9",
"@types/react": "18.2.21",
"@types/react-dom": "18.2.7",
"@vanilla-extract/css": "^1.13.0",
"@vanilla-extract/next-plugin": "^2.3.0",
"eslint": "8.48.0",
"eslint-config-next": "13.4.19",
"next": "13.4.19",
"react": "18.2.0",
"react-dom": "18.2.0",
"typescript": "5.2.2"
}
}

/src/app/page.tsx

import * as styles from './page.css'

export default function Home() {
return (
<main>
<div className={styles.page}>page</div>
</main>
)
}

/src/app/page.css.ts

import { style } from '@vanilla-extract/css'

export const page = style({
padding: 50
})

export const text = style({
color: 'red'
})

I tried setting vanilla-extract as below in next13, but there is no error and the style is not applied. What should I do?

Answer 1

It probably won't work if your OS is Windows. Try it in wsl2