diff --git a/docs/extensions/Katex/index.md b/docs/extensions/Katex/index.md
index 5c603b5..fe9ea2a 100644
--- a/docs/extensions/Katex/index.md
+++ b/docs/extensions/Katex/index.md
@@ -16,6 +16,8 @@ next:
 ## Usage
 
 ```tsx
+
+import 'katex/dist/katex.min.css'; // [!code ++]
 import { Katex } from 'reactjs-tiptap-editor'; // [!code ++]
 
 const extensions = [
diff --git a/playground/src/App.tsx b/playground/src/App.tsx
index dced172..bf34a5e 100644
--- a/playground/src/App.tsx
+++ b/playground/src/App.tsx
@@ -50,6 +50,7 @@ import RichTextEditor, {
 } from 'reactjs-tiptap-editor'
 
 import 'reactjs-tiptap-editor/style.css'
+import 'katex/dist/katex.min.css'
 
 function convertBase64ToBlob(base64: string) {
   const arr = base64.split(',')
diff --git a/src/styles/index.scss b/src/styles/index.scss
index ddb1e5c..5123843 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -1,6 +1,5 @@
-@import './global';
-@import './editor';
-@import './ProseMirror';
-@import 'katex/dist/katex.min.css';
-@import './columns.scss';
-@import './mention.scss';
+@use './global';
+@use './editor';
+@use './ProseMirror';
+@use './columns';
+@use './mention';