Blitz: Can't use non-js/ts files inside `pages/` folders

[gielcobben]

What is the problem?

I want to use CSS Modules with Blitz so I followed this guide: https://nextjs.org/docs/basic-features/built-in-css-support. I also installed npm i sass so it supports scss files. Everything seems to work fine except when I'm using CSS Modules in /pages:

app/pages/index.tsx
app/pages/index.module.scss

app/pages/projects/index.tsx
app/pages/projects/index.module.scss

_Note: This error only occurs in /pages, so CSS Modules work perfectly fine in /components_

Steps to Reproduce:

1. Create a file: /app/pages/index.module.scss
2. Import the file: import styles from "./index.module.scss"
3. Add a style to a html element: <main className={styles.container}>
4. Get a Module not found error.

Versions:

debug: local
debug: pkgPath: /test/node_modules/@blitzjs/cli

macOS Catalina | darwin-x64 | Node: v12.16.1

blitz: 0.8.1 (global)
blitz: 0.8.1 (local)

Supporting Documentation

./pages/index.tsx
Module not found: Can't resolve 'app/pages/index.module.scss' in '/test/.blitz/caches/dev/pages'

---

Edit from @flybayer

The problem is that our compiler is only using js/ts files inside pages/. We need to change this so that all files inside pages/ get processed. Our conflict detection must also detect conflicts for these files.

[0ww]

Hello @gielcobben, thank you so much for reporting this issue!

[flybayer]

@gielcobben the problem is that all files inside pages/ must be a React component that will be rendered as a page.

What you are trying to do doesn't work with Next.js.

The solution is to put your scss files in another folder outside of pages/.

Try this, and let us know if it works for you!

[gielcobben]

It works perfectly fine in all my next projects. It's just not working properly in a blitz project.
This is my file structure in a next project:

[flybayer]

@gielcobben oh wow, I didn't know that would work!

We'll get this fixed

[emgoto]

I ran into the same issue, I tried to setup Tailwind CSS (following this guide) but got stuck at the step where you can't import the stylesheet in the _app.js file.

I tried to work around it by importing the css file from my layout component (outside of pages) but I got a Next.js "Please move all global CSS imports to pages/_app.tsx" error.

[merelinguist]

@gielcobben @flybayer Just having a look at this now and I think the problem might be that you’re using an older version of Blitz? This seems to have been fixed already. Could you try upgrading to latest? 👍

[gielcobben]

@merelinguist I updated to the latest version but keep getting this error:

./pages/signin/index.tsx
Module not found: Can't resolve 'app/users/pages/signin/index.module.scss' in '/Users/giel/Sites/_/opslan/.blitz/caches/dev/pages/signin'

Here is a screenshot of the error in my terminal:

[flybayer]

@emgoto tailwind does work with Blitz right now, but just with the css files outside of the pages directory. Look at this example blitz app which has tailwind integrated.

[flybayer]

@ryardley this would be good to get fixed soon if we can, it keeps affecting people

[ryardley]

I guess the best way to fix this is to leave any non tsx files in pages folder instead of copying them. That way the absolute imports that blitz substitutes will work eg. app/users/pages/signin/index.module.scss I can throw up a fix today.

[flybayer]

This has been fixed in 0.16.3!