diff --git a/Cargo.toml b/Cargo.toml
index d2bda881f..c869267b1 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -40,6 +40,8 @@ axum = { version = "0.5.1", features = ["ws", "headers"] }
 tower-http = { version = "0.2.2", features = ["fs", "trace"] }
 headers = "0.3.7"
 
+walkdir = "2"
+
 # tools download
 dirs = "4.0.0"
 reqwest = { version = "0.11", features = ["rustls-tls", "stream", "trust-dns"] }
diff --git a/src/assets/dioxus.toml b/src/assets/dioxus.toml
index 8f160b293..3e82e0c93 100644
--- a/src/assets/dioxus.toml
+++ b/src/assets/dioxus.toml
@@ -47,8 +47,6 @@ binaryen = { wasm_opt = true }
 # use sass auto will auto check sass file and build it.
 [application.tools.sass]
 
-version = "1.51.0"
-
 # if auto = true, we will check style array, and translate all sass file to css.
 auto = true
 
@@ -56,5 +54,5 @@ auto = true
 files = [
     # some sass file path
     # this file will translate to `/css/test.css`
-    "/css/test.sass"
+    "/css/test.scss"
 ]
\ No newline at end of file
diff --git a/src/builder.rs b/src/builder.rs
index f7f68e2bc..7c3a7e9fb 100644
--- a/src/builder.rs
+++ b/src/builder.rs
@@ -1,6 +1,7 @@
 use crate::{
     config::{CrateConfig, ExecutableType},
     error::{Error, Result},
+    tools::Tool,
     DioxusConfig,
 };
 use std::{
@@ -29,6 +30,10 @@ pub fn build(config: &CrateConfig) -> Result<()> {
         ..
     } = config;
 
+
+    // start to build the assets
+    build_assets(config)?;
+
     let t_start = std::time::Instant::now();
 
     // [1] Build the .wasm module
@@ -339,6 +344,49 @@ pub fn gen_page(config: &DioxusConfig, serve: bool) -> String {
     html.replace("{app_title}", &title)
 }
 
+// this function will build some assets file
+// like sass tool resources
+fn build_assets(config: &CrateConfig) -> Result<()> {
+    let dioxus_config = &config.dioxus_config;
+    let dioxus_tools = dioxus_config.application.tools.clone().unwrap_or_default();
+
+    // check sass tool state
+    let sass = Tool::Sass;
+    if sass.is_installed() && dioxus_tools.contains_key("sass") {
+        let sass_conf = dioxus_tools.get("sass").unwrap();
+        if let Some(tab) = sass_conf.as_table() {
+            if tab.contains_key("auto") && tab.get("auto").unwrap().as_bool().unwrap_or(false) {
+                // if the sass open auto, we need auto-check the assets dir.
+                let asset_dir = config.asset_dir.clone();
+                if asset_dir.is_dir() {
+                    for entry in walkdir::WalkDir::new(asset_dir)
+                        .into_iter()
+                        .filter_map(|e| e.ok())
+                    {
+                        let temp = entry.path();
+                        if temp.is_file() {
+                            let suffix = temp.file_name().unwrap().to_str().unwrap();
+                            let suffix = suffix.split('.').collect::<Vec<&str>>();
+                            let suffix: &str = suffix.last().unwrap();
+                            if suffix == "scss" {
+                                // if file suffix is `scss` we need transform it.
+                                let temp_stem = temp.file_stem().unwrap().to_str().unwrap();
+                                let target_path =
+                                    temp.parent().unwrap().join(format!("{}.css", temp_stem));
+                                sass.call(
+                                    "sass",
+                                    vec![temp.to_str().unwrap(), target_path.to_str().unwrap()],
+                                )?;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+    Ok(())
+}
+
 // use binary_install::{Cache, Download};
 
 // /// Attempts to find `wasm-opt` in `PATH` locally, or failing that downloads a