From 741a7079fea0e673b57aaa8468585e61a3065014 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bed=C5=99ich=20Schindler?= Date: Tue, 18 Feb 2025 15:44:09 +0100 Subject: [PATCH] docs(ct): add brief information about CSS modules into FAQ (#34677) --- docs/src/test-components-js.md | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/docs/src/test-components-js.md b/docs/src/test-components-js.md index 9a28edd40e..9559989571 100644 --- a/docs/src/test-components-js.md +++ b/docs/src/test-components-js.md @@ -853,6 +853,14 @@ export default defineConfig({ }); ``` +### How do I use CSS imports? + +If you have a component that imports CSS, Vite will handle it automatically. You can also use CSS pre-processors such as Sass, Less, or Stylus, and Vite will handle them as well without any additional configuration. However, corresponding CSS pre-processor needs to be installed. + +Vite has a hard requirement that all CSS Modules are named `*.module.[css extension]`. If you have a custom build config for your project normally and have imports of the form `import styles from 'styles.css'` you must rename your files to properly indicate they are to be treated as modules. You could also write a Vite plugin to handle this for you. + +Check [Vite documentation](https://vite.dev/guide/features#css) for more details. + ### How can I test components that uses Pinia? Pinia needs to be initialized in `playwright/index.{js,ts,jsx,tsx}`. If you do this inside a `beforeMount` hook, the `initialState` can be overwritten on a per-test basis: