如何擺脫Sass依賴，只用純CSS引入外部樣式表？

擺脫sass依賴：用純css替代@import

在前端項目中，我們經常會使用預處理器，例如sass，來編寫css樣式。然而，如果項目中只有一小部分樣式使用了sass，而其余部分都使用純css，那么引入sass及其相關的構建工具（如sass-loader）就會顯得多余。本文將討論如何用純css替代一個僅包含@import語句的sass文件，從而消除對sass的依賴。

問題描述中給出的sass文件主要作用是通過@import語句引入其他css文件，例如select2、font awesome、ionicons和bootstrap的樣式文件。為了移除sass依賴，我們可以直接使用標簽在html文件中引入這些css文件。

方法如下： 找到sass文件中@import引入的每個css文件路徑，例如”~select2/dist/css/select2.css”，然后在html的

標簽內添加相應的標簽：

<link rel="stylesheet" href="path/to/select2/dist/css/select2.css"> <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.css"> <link rel="stylesheet" href="path/to/ionicons/dist/css/ionicons.css"> <link rel="stylesheet" href="path/to/bootstrap/dist/css/bootstrap.css">

需要注意的是，這里的path/to/需要替換成實際的css文件路徑。 這些路徑可能需要根據你的項目結構進行調整。 原sass文件中的~符號通常代表項目根目錄，需要根據你的項目配置來確定其對應路徑。

立即學習“前端免費學習筆記（深入）”；

通過這種方法，我們就能直接用html的標簽引入所需的css文件，從而完全消除對sass和sass-loader的依賴，達到簡化項目構建流程的目的。 這種方法比在純css文件中使用@import更直接，避免了額外處理css文件導入的步驟。 記住，你需要確保所有引入的css文件的路徑都是正確的。