diff --git a/cli/configCra.js b/cli/configCra.js
index c9d5cf80..06311d45 100755
--- a/cli/configCra.js
+++ b/cli/configCra.js
@@ -104,12 +104,12 @@ function injectToFileIfExisted(filePath, content) {
 
 try {
   const configToInject = `import { jestPreviewConfigure } from 'jest-preview'
+// TODO: To add your global css here
+import './index.css';
 
 jestPreviewConfigure({
   // Opt-in to automatic mode to preview failed test case.
   autoPreview: true,
-  // TODO: To add your global css here
-  externalCss: ['src/index.css'],
 })
 `;
   injectToFileIfExisted(
diff --git a/config/jest/setupTests.js b/demo/setupTests.js
similarity index 79%
rename from config/jest/setupTests.js
rename to demo/setupTests.js
index 8e50f555..f1bb8d7e 100644
--- a/config/jest/setupTests.js
+++ b/demo/setupTests.js
@@ -1,8 +1,9 @@
 import '@testing-library/jest-dom/extend-expect';
-import { jestPreviewConfigure } from '../../dist/index';
+import { jestPreviewConfigure } from '../dist/index';
+import './global.css';
+import './assets/_scss/global-style.scss';
 
 jestPreviewConfigure({
-  externalCss: ['demo/global.css', 'demo/assets/_scss/global-style.scss'],
   publicFolder: 'demo/public',
   autoPreview: true,
   sassLoadPaths: ['demo/assets/_scss/loadPathsExample'],
diff --git a/examples/create-react-app/src/setupTests.ts b/examples/create-react-app/src/setupTests.ts
index faaab917..a4107c8a 100644
--- a/examples/create-react-app/src/setupTests.ts
+++ b/examples/create-react-app/src/setupTests.ts
@@ -4,9 +4,10 @@
 // learn more: https://github.com/testing-library/jest-dom
 import '@testing-library/jest-dom';
 import { jestPreviewConfigure } from 'jest-preview';
+import './index.css';
+import './assets/_scss/global-style.scss';
 
 jestPreviewConfigure({
-  externalCss: ['src/index.css', 'src/assets/_scss/global-style.scss'],
   sassLoadPaths: ['src/assets/_scss/loadPathsExample'],
 });
 
diff --git a/examples/jest-24/jest.config.js b/examples/jest-24/jest.config.js
index cd879837..f58ed145 100644
--- a/examples/jest-24/jest.config.js
+++ b/examples/jest-24/jest.config.js
@@ -6,7 +6,7 @@ module.exports = {
     '!src/mocks/**',
   ],
   coveragePathIgnorePatterns: [],
-  setupFilesAfterEnv: ['./config/jest/setupTests.js'],
+  setupFilesAfterEnv: ['<rootDir>/src/setupTests.ts'],
   testEnvironment: 'jsdom',
   modulePaths: ['<rootDir>/src'],
   transform: {
diff --git a/examples/jest-24/config/jest/setupTests.js b/examples/jest-24/src/setupTests.ts
similarity index 87%
rename from examples/jest-24/config/jest/setupTests.js
rename to examples/jest-24/src/setupTests.ts
index 22bde1d2..70ba86a9 100644
--- a/examples/jest-24/config/jest/setupTests.js
+++ b/examples/jest-24/src/setupTests.ts
@@ -1,9 +1,10 @@
 // @ts-check
 import '@testing-library/jest-dom/extend-expect';
 import { jestPreviewConfigure } from 'jest-preview';
+import './index.css';
+import './assets/_scss/global-style.scss';
 
 jestPreviewConfigure({
-  externalCss: ['src/index.css', 'src/assets/_scss/global-style.scss'],
   autoPreview: true,
 });
 
diff --git a/examples/jest-28/jest.config.js b/examples/jest-28/jest.config.js
index cd879837..f58ed145 100644
--- a/examples/jest-28/jest.config.js
+++ b/examples/jest-28/jest.config.js
@@ -6,7 +6,7 @@ module.exports = {
     '!src/mocks/**',
   ],
   coveragePathIgnorePatterns: [],
-  setupFilesAfterEnv: ['./config/jest/setupTests.js'],
+  setupFilesAfterEnv: ['<rootDir>/src/setupTests.ts'],
   testEnvironment: 'jsdom',
   modulePaths: ['<rootDir>/src'],
   transform: {
diff --git a/examples/jest-28/config/jest/setupTests.js b/examples/jest-28/src/setupTests.ts
similarity index 87%
rename from examples/jest-28/config/jest/setupTests.js
rename to examples/jest-28/src/setupTests.ts
index 22bde1d2..70ba86a9 100644
--- a/examples/jest-28/config/jest/setupTests.js
+++ b/examples/jest-28/src/setupTests.ts
@@ -1,9 +1,10 @@
 // @ts-check
 import '@testing-library/jest-dom/extend-expect';
 import { jestPreviewConfigure } from 'jest-preview';
+import './index.css';
+import './assets/_scss/global-style.scss';
 
 jestPreviewConfigure({
-  externalCss: ['src/index.css', 'src/assets/_scss/global-style.scss'],
   autoPreview: true,
 });
 
diff --git a/examples/nextjs-babel/README.md b/examples/nextjs-babel/README.md
index 2055fc70..4e20e554 100644
--- a/examples/nextjs-babel/README.md
+++ b/examples/nextjs-babel/README.md
@@ -64,17 +64,12 @@ Configure Jest Preview inside `jest.setup.js` (or any setup files) specified in
 
 ```js
 import { jestPreviewConfigure } from 'jest-preview';
+import 'styles/globals.css';
+// SCSS is also supported
+import 'demo/globals.scss',
+// Any CSS from node_modules is fine
+import '@your-design-system/css/dist/index.min.css',
 
-jestPreviewConfigure({
-  // An array of relative paths from the root of your project
-  externalCss: [
-    'styles/globals.css',
-    // SCSS is also supported
-    // 'demo/globals.scss',
-    // Any CSS from node_modules is fine
-    // 'node_modules/@your-design-system/css/dist/index.min.css',
-  ],
-});
 ```
 
 ## Done
diff --git a/examples/nextjs-babel/jest.setup.js b/examples/nextjs-babel/jest.setup.js
index b7d7031e..95ca0c17 100644
--- a/examples/nextjs-babel/jest.setup.js
+++ b/examples/nextjs-babel/jest.setup.js
@@ -1,8 +1,6 @@
 import { jestPreviewConfigure } from 'jest-preview';
+import './styles/globals.css';
 
 jestPreviewConfigure({
-  // An array of relative path from the root of your project
-  externalCss: [
-    'styles/globals.css',
-  ],
+  autoPreview: true,
 });
diff --git a/examples/nextjs/README.md b/examples/nextjs/README.md
index c0dbd2dc..2ef758e2 100644
--- a/examples/nextjs/README.md
+++ b/examples/nextjs/README.md
@@ -49,17 +49,12 @@ Configure Jest Preview inside `jest.setup.js` (or any setup files) specified in
 
 ```js
 import { jestPreviewConfigure } from 'jest-preview';
+import 'styles/globals.css';
+// SCSS is also supported
+import 'demo/globals.scss',
+// Any CSS from node_modules is fine
+import '@your-design-system/css/dist/index.min.css',
 
-jestPreviewConfigure({
-  // An array of relative paths from the root of your project
-  externalCss: [
-    'styles/globals.css',
-    // SCSS is also supported
-    // 'demo/globals.scss',
-    // Any CSS from node_modules is fine
-    // 'node_modules/@your-design-system/css/dist/index.min.css',
-  ],
-});
 ```
 
 ## Done
diff --git a/examples/nextjs/jest.setup.js b/examples/nextjs/jest.setup.js
index b7d7031e..95ca0c17 100644
--- a/examples/nextjs/jest.setup.js
+++ b/examples/nextjs/jest.setup.js
@@ -1,8 +1,6 @@
 import { jestPreviewConfigure } from 'jest-preview';
+import './styles/globals.css';
 
 jestPreviewConfigure({
-  // An array of relative path from the root of your project
-  externalCss: [
-    'styles/globals.css',
-  ],
+  autoPreview: true,
 });
diff --git a/examples/vite-react/jest.config.js b/examples/vite-react/jest.config.js
index abb20ab9..4d8e64b7 100644
--- a/examples/vite-react/jest.config.js
+++ b/examples/vite-react/jest.config.js
@@ -6,7 +6,7 @@ module.exports = {
     '!src/mocks/**',
   ],
   coveragePathIgnorePatterns: [],
-  setupFilesAfterEnv: ['./config/jest/setupTests.js'],
+  setupFilesAfterEnv: ['<rootDir>/src/setupTests.ts'],
   testEnvironment: 'jsdom',
   modulePaths: ['<rootDir>/src'],
   transform: {
diff --git a/examples/vite-react/config/jest/setupTests.js b/examples/vite-react/src/setupTests.ts
similarity index 88%
rename from examples/vite-react/config/jest/setupTests.js
rename to examples/vite-react/src/setupTests.ts
index 046c2db5..84ea46ff 100644
--- a/examples/vite-react/config/jest/setupTests.js
+++ b/examples/vite-react/src/setupTests.ts
@@ -1,9 +1,10 @@
 // @ts-check
 import '@testing-library/jest-dom/extend-expect';
 import { jestPreviewConfigure } from 'jest-preview';
+import './index.css';
+import './assets/_scss/global-style.scss';
 
 jestPreviewConfigure({
-  externalCss: ['src/index.css', 'src/assets/_scss/global-style.scss'],
   autoPreview: true,
   sassLoadPaths: ['src/assets/_scss/loadPathsExample'],
 });
diff --git a/jest.config.js b/jest.config.js
index 137e793d..b23a4068 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -7,7 +7,7 @@ module.exports = {
     // TODO: To report coverage in `src`. They are compiled to `dist` so it's difficult to report coverage directly
   ],
   coveragePathIgnorePatterns: [],
-  setupFilesAfterEnv: ['./config/jest/setupTests.js'],
+  setupFilesAfterEnv: ['<rootDir>/demo/setupTests.js'],
   testEnvironment: 'jsdom',
   modulePaths: ['<rootDir>/demo'],
   transform: {
diff --git a/src/configure.ts b/src/configure.ts
index da62ef80..66019ab8 100644
--- a/src/configure.ts
+++ b/src/configure.ts
@@ -1,12 +1,15 @@
 import path from 'path';
 import fs from 'fs';
 import { exec } from 'child_process';
-
+import chalk from 'chalk';
 import { CACHE_FOLDER, SASS_LOAD_PATHS_CONFIG } from './constants';
 import { createCacheFolderIfNeeded } from './utils';
 import { debug } from './preview';
 
 interface JestPreviewConfigOptions {
+  /**
+   * @deprecated externalCss should not be used and will be removed in 0.4.0. Import the css files directly instead. Read more at www.jest-preview.com/blog/deprecate-externalCss
+   */
   externalCss?: string[];
   autoPreview?: boolean;
   publicFolder?: string;
@@ -15,12 +18,11 @@ interface JestPreviewConfigOptions {
 
 export async function jestPreviewConfigure(
   {
-    externalCss = [],
+    externalCss,
     autoPreview = false,
     publicFolder,
     sassLoadPaths,
   }: JestPreviewConfigOptions = {
-    externalCss: [],
     autoPreview: false,
     sassLoadPaths: [],
   },
@@ -53,6 +55,12 @@ export async function jestPreviewConfigure(
   externalCss?.forEach((cssFile) => {
     // Avoid name collision
     // Example: src/common/styles.css => cache-src___common___styles.css
+    console.log(
+      chalk.yellow(
+        'externalCss is deprecated. Please import css files directly in your setup file.',
+        'See the migration guide at www.jest-preview.com/blog/deprecate-externalCss',
+      ),
+    );
     const delimiter = '___';
     const destinationBasename = `cache-${cssFile.replace(/\//g, delimiter)}`;
     const destinationFile = path.join(CACHE_FOLDER, destinationBasename);
diff --git a/website/blog/2022-04-23-sass-support/index.md b/website/blog/2022-04-23-sass-support/index.md
index dca3d31d..93a4ae89 100644
--- a/website/blog/2022-04-23-sass-support/index.md
+++ b/website/blog/2022-04-23-sass-support/index.md
@@ -12,20 +12,13 @@ Sass is one of the most popular CSS extension language in the ecosystem and is b
 
 ![Jest Preview supports Sass](./jest-preview-supports-sass.png)
 
-You can even add Sass as an external CSS via [jestPreviewConfigure](/docs/api/jestPreviewConfigure). This is usually handy for stylesheet files imported in `src/index.js` or `src/main.js`.
+You can even add Sass as an external CSS directly in your setup test file. This is usually handy for stylesheet files imported in `src/index.js` or `src/main.js`.
 
 ```js
 // setupTests.js
 import { jestPreviewConfigure } from 'jest-preview';
-
-// Should be path from root of your project
-jestPreviewConfigure({
-  // Configure external CSS
-  externalCss: [
-    'demo/global.scss',
-    'node_modules/@your-design-system/css/dist/index.min.scss', // scss from node_modules
-  ],
-});
+import './global.scss';
+import '@your-design-system/css/dist/index.min.scss';
 ```
 
 For now, Jest Preview only supports Dart Sass, since [LibSass and Node Sass are deprecated](https://sass-lang.com/blog/libsass-is-deprecated). One caveat is that Jest Preview doesn't support [load path](https://sass-lang.com/documentation/cli/dart-sass#load-path) yet. We will add it to the next version.
diff --git a/website/blog/2022-04-25-nextjs-support/index.md b/website/blog/2022-04-25-nextjs-support/index.md
index 1cc90a80..258637b3 100644
--- a/website/blog/2022-04-25-nextjs-support/index.md
+++ b/website/blog/2022-04-25-nextjs-support/index.md
@@ -51,16 +51,12 @@ and configure external CSS files if there are any.
 
 ```js
 import { jestPreviewConfigure } from 'jest-preview';
-
-jestPreviewConfigure({
-  // An array of relative paths from the root of your project
-  externalCss: [
-    'styles/globals.css',
-    // SCSS is also supported
-    'demo/globals.scss',
-    // Any CSS from node_modules is fine
-    'node_modules/@your-design-system/css/dist/index.min.css',
-  ],
+// Global CSS is supported
+import 'styles/globals.css';
+// SCSS is also supported
+import 'demo/globals.scss';
+// Any CSS from dependencies is fine
+import '@your-design-system/css/dist/index.min.css';
 ```
 
 For details, please refer to [Installation guide](/docs/getting-started/installation). You can also see the **full example** at [Nextjs with Rust compiler](https://github.com/nvh95/jest-preview/tree/main/examples/nextjs)
diff --git a/website/blog/2022-06-11-deprecate-externalCss/index.md b/website/blog/2022-06-11-deprecate-externalCss/index.md
new file mode 100644
index 00000000..8eb44d31
--- /dev/null
+++ b/website/blog/2022-06-11-deprecate-externalCss/index.md
@@ -0,0 +1,29 @@
+---
+slug: deprecate-externalCss
+title: Deprecate externalCss option
+authors: [nvh95]
+tags: [jest-preview, backward-compatible, css]
+image: /img/deprecate-externalCss.jpg
+---
+
+Previous Jest Preview provides a way to configure external CSS via `externalCss` option in `jestPreviewConfigure` function. However, we realized that we can actually import the css **DIRECTLY** in the setup test file (usually `setupFilesAfterEnv` in Jest config) instead. This way, we can use the same logic to process external CSS as well as CSS in your components.
+
+**What you need to do is as follow:**
+
+```diff
+// src/setupTests.js
+-jestPreviewConfigure({
+-  externalCss: ['src/global.css', 'src/assets/_scss/global-style.scss'],
+-});
++import './global.css';
++import './assets/_scss/global-style.scss';
+```
+
+`externalCss` is not recommended to use anymore. Please do not use it. We are planning to remove it gradually with this road map:
+
+> - 0.2.4: Add a warning to warn users if they use `externalCss`.
+> - 0.3.0: Remove the code to process `externalCss` in `jestPreviewConfigure`, show an error if users use `externalCss`.
+> - 0.4.0: Throw an error if users configure `externalCss`.
+> - 0.5.0: Remove `externalCss` completely.
+
+We hope with this change, Jest Preview will get better and better. Please reach us at [Issues](https://github.com/nvh95/jest-preview/issues) if you have any issues with this deprecation. Thanks.
diff --git a/website/docs/api/jestPreviewConfigure.md b/website/docs/api/jestPreviewConfigure.md
index 96872519..83fa3ae9 100644
--- a/website/docs/api/jestPreviewConfigure.md
+++ b/website/docs/api/jestPreviewConfigure.md
@@ -5,39 +5,23 @@ sidebar_position: 2
 # jestPreviewConfigure()
 
 ```js
-// ./config/jest/setupTests.js
+// src/setupTests.js
 import { jestPreviewConfigure } from 'jest-preview';
+// Configure external CSS
+import './global.css';
+import './global.scss';
+import '@your-design-system/css/dist/index.min.css';
+import 'bootstrap/dist/css/bootstrap.min.css';
 
-// Should be path from root of your project
 jestPreviewConfigure({
-  // Configure external CSS
-  externalCss: [
-    'demo/global.css',
-    'demo/global.scss', // Sass
-    'node_modules/@your-design-system/css/dist/index.min.css', // css from node_modules
-    'node_modules/bootstrap/dist/css/bootstrap.min.css',
-  ],
   // Configure public folder if your public folder is not "public"
   publicFolder: 'your-public-folder-name',
 });
 ```
 
-## externalCss: string[]
+## externalCss: string[] (Deprecated)
 
-Default: `[]`
-
-CSS files outside your Jest rendered app (e.g: CSS from `src/index.js`, `main.jsx`) should be configured via `externalCss` option. They should be path from root of your project. For example:
-
-```js
-jestPreviewConfigure({
-  // Configure external CSS
-  externalCss: [
-    'demo/global.css',
-    'demo/global.scss', // Sass
-    'node_modules/@your-design-system/css/dist/index.min.css', // css from node_modules
-    'node_modules/bootstrap/dist/css/bootstrap.min.css',
-  ],
-```
+This option is deprecated. Please do not use it. Instead, import the CSS directly. See the instruction at [Deprecate CSS](/blog/deprecate-externalCss)
 
 ## sassLoadPaths: string[]
 
@@ -48,9 +32,8 @@ Paths in which to look for stylesheets loaded by rules like `@use` and `@import`
 ```js
 jestPreviewConfigure({
   // Configure Sass load paths
-  sassLoadPaths: [
-    'demo/assets/_scss/loadPathsExample',
-  ],
+  sassLoadPaths: ['demo/assets/_scss/loadPathsExample'],
+});
 ```
 
 ## publicFolder: string
diff --git a/website/docs/getting-started/installation.md b/website/docs/getting-started/installation.md
index cddb48cc..e7164146 100644
--- a/website/docs/getting-started/installation.md
+++ b/website/docs/getting-started/installation.md
@@ -59,22 +59,15 @@ Sometimes, there are some CSS files imported outside your current test component
 ```js
   // jest.config.js
   {
-    setupFilesAfterEnv: ["./config/jest/setupTests.js"],
+    setupFilesAfterEnv: ['<rootDir>/src/setupTests.ts'],
   }
 ```
 
 ```js
-// ./config/jest/setupTests.js
-import { jestPreviewConfigure } from 'jest-preview';
-
-// Should be path from root of your project
-jestPreviewConfigure({
-  externalCss: [
-    'demo/global.css',
-    'node_modules/@your-design-system/css/dist/index.min.css',
-    'node_modules/bootstrap/dist/css/bootstrap.min.css',
-  ],
-});
+// src/setupTests.js
+import './global.css';
+import '@your-design-system/css/dist/index.min.css';
+import 'bootstrap/dist/css/bootstrap.min.css';
 ```
 
 ### 5. (Optional) Configure public folder
diff --git a/website/docs/others/faq.md b/website/docs/others/faq.md
index 961ecbfb..638f7e18 100644
--- a/website/docs/others/faq.md
+++ b/website/docs/others/faq.md
@@ -13,13 +13,10 @@ There are a few reasons that you might not see CSS on the Jest Preview Dashboard
 - You might have some CSS files that are not imported to your current testing component (i.e: `src/index.jsx`, `src/main.jsx`). You can configure external CSS using `jestPreviewConfigure`. See more at [**Installation**](/docs/getting-started/installation#4-optional-configure-external-css).
 
 ```js
-jestPreviewConfigure({
-  externalCss: [
-    'demo/global.css',
-    'node_modules/@your-design-system/css/dist/index.min.css',
-    'node_modules/bootstrap/dist/css/bootstrap.min.css',
-  ],
-});
+// src/setupTests.js
+import './global.css';
+import '@your-design-system/css/dist/index.min.css';
+import 'bootstrap/dist/css/bootstrap.min.css';
 ```
 
 - Your CSS strategy is not supported by Jest Preview yet. Please see [**Features**](/docs/getting-started/features) for supported CSS strategies. Feel free to [Request a new feature](https://github.com/nvh95/jest-preview/issues/new?assignees=&labels=&template=feature_request.md&title=) if you want Jest Preview supports your use case.
diff --git a/website/package.json b/website/package.json
index f8cd7a21..9fc44adf 100644
--- a/website/package.json
+++ b/website/package.json
@@ -4,7 +4,7 @@
   "private": true,
   "scripts": {
     "docusaurus": "docusaurus",
-    "start": "docusaurus start",
+    "start": "docusaurus start --no-open",
     "build": "node scripts/contributing.js && docusaurus build",
     "swizzle": "docusaurus swizzle",
     "deploy": "docusaurus deploy",
diff --git a/website/static/img/deprecate-externalCss.jpg b/website/static/img/deprecate-externalCss.jpg
new file mode 100644
index 00000000..390732e2
Binary files /dev/null and b/website/static/img/deprecate-externalCss.jpg differ