大家平時(shí)做項(xiàng)目肯定都習(xí)慣了使用scss或者less去寫樣式，如果是使用工程化的項(xiàng)目我們可以借助插件很方便的將scss或者less轉(zhuǎn)換成css。那如果我們沒有使用工程化，比如簡(jiǎn)單的demo或者官網(wǎng)等項(xiàng)目又希望可以通過scss去編寫文件應(yīng)該怎么辦呢，我們可以借助sass插件去幫我們轉(zhuǎn)換生成css樣式文件，原理和工程化其實(shí)是一樣的，只是我們手動(dòng)的去觸發(fā)了sass的能力。
1.安裝sass
首先在我們的項(xiàng)目下安裝sass
npm i sass
2.使用命令轉(zhuǎn)譯scss或sass文件
假設(shè)我們的頁(yè)面都在page目錄下，每個(gè)頁(yè)面為一個(gè)文件夾，存放的是html文件和scss文件，例如下面的index
在index.html文件中我們無法直接使用scss文件，所以我們可以使用下面的命令先將scss文件轉(zhuǎn)譯為css文件：
sass .\index.scss .\index.css
注意控制臺(tái)的起始路徑，路徑拼接以后一定要指向一個(gè)具體的文件。假如我的項(xiàng)目名為demo，它存放在D盤的project文件夾下，我的控制臺(tái)的窗口顯示起始路徑假設(shè)為D:\project，那么我們的命令應(yīng)該更改為：
sass .\demo\page\index\index.scss .\demo\page\index\index.scss
運(yùn)行這段命令后sass會(huì)將我們指定的scss文件轉(zhuǎn)換為css文件
這個(gè)時(shí)候我們就可以在html中引入轉(zhuǎn)換好的css文件
3.監(jiān)聽scss變化更新css文件
在開發(fā)中如果我們總是手動(dòng)輸入命令去生成css文件這肯定是讓人無法忍受的，所以我們可以借助一個(gè)指令去完成監(jiān)聽，它就是--watch，當(dāng)我們輸入如下命令時(shí)文章來源：http://www.zghlxwxcb.cn/news/detail-461848.html
sass --watch .\demo\page\index\index.scss .\demo\page\index\index.scss
這個(gè)時(shí)候就會(huì)開啟指定文件的更改監(jiān)聽，每當(dāng)我們更改保存index.scss文件時(shí)，index.css都會(huì)自動(dòng)被更新。文章來源地址http://www.zghlxwxcb.cn/news/detail-461848.html
到了這里，關(guān)于將scss文件轉(zhuǎn)換成css文件的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
