如何讓SASS在Symfony3項目中工作？

我有一個Symfony3項目，並希望爲我的樣式表使用SASS。如何讓SASS在Symfony3項目中工作？

我查了很多頁面，發現資產相關的線程 - 但沒有「真正的」解釋，如何將SASS集成到Symfony3項目中。

不能太難，可以嗎？

我會很高興聽到任何提示或完成「如何」 - 謝謝一堆！

來源

2017-08-09 MrLumbergh

我使用NPM爲此創建了一個單獨的前端構建過程，它可以處理所有圖像，SASS/CSS和JS等壓縮，然後添加構建步驟以生成所有內容。

如果你沒有NPM，按照說明進行安裝：https://www.npmjs.com/get-npm

在您的項目目錄中運行npm init初始化該項目。

安裝一些工具來編譯和壓縮：

npm install node-sass --save-dev這個編譯SASS爲CSS

npm install postcss-cli --save-dev這個過程編譯CSS

npm install cssnano --save-dev這minifies CSS和用作插件postcss

npm install autoprefixer --save-dev這增加了moz，webkit和供應商前綴，並被用作的插件10

npm install npm-run-all --save-dev這不是絕對必要的，但允許您分組命令，這有助於添加更多步驟。

一旦你安裝了這些依賴關係，你可以添加你的構建腳本。打開package.json並修改scripts密鑰。

{ 
    "name": "your-project-name", 
    ... 
    "scripts": { 
    "build-task:scss-compile": "node-sass --source-map true app/Resources/sass/app.sass -o web/css", 
    "build-task:css-minify": "postcss web/css/app.css --use cssnano autoprefixer -d web/css", 
    "build": "npm-run-all -p build-task:*" 
    }, 
    ... 
}

您現在可以運行npm run build。 build-task:scss-compile會將您的SASS編譯成web/css目錄中的單個未壓縮CSS文件，該文件可鏈接到您的模板中。然後build-task:css-minify將壓縮它並將任何供應商前綴添加到CSS。

您可以像上面提到的那樣添加更多構建任務並以這種方式鏈接它們。您還可以添加文件觀察器和一個監視命令，該命令將在任何觀察文件被修改時運行構建腳本。

不要忘了添加node_modules到您的.gitignore文件。

我選擇像Symfony docs中概述的Assetic和leafo/scss之類的單獨流程的原因是，資產過濾器會在響應中增加大量開銷，因爲它們會動態地壓縮事物，這會大大減慢開發速度。它還將應用程序和演示文稿之間的關注區分開來，併爲您提供更大的靈活性，以便在未觸及應用程序的情況下構建和調整前端。

編輯：這裏是一個package.json文件，該文件也將複製的jQuery，FontAwesome，在assets目錄包括任何圖像或字體的任何東西，編譯和縮小的JavaScript的要點，檢查他們的錯誤後，還創建所需的目錄，如果他們不存在和一個文件觀察員建設當文件被修改： https://gist.github.com/matt-halliday/6b9a3a015b7a87c5b165ce1a9ae19c9b

來源

2017-08-09 09:13:33

我會對JS/Img的事情感興趣...如果你有時間寫東西了？謝謝！ – MrLumbergh

@MrLumbergh - 我編輯並添加了一個示例文件的要點，將做很多事情：https://gist.github.com/matt-halliday/6b9a3a015b7a87c5b165ce1a9ae19c9b –

@MrLumbergh也請考慮接受這個答案，如果它幫助你...！謝謝 –

如何讓SASS在Symfony3項目中工作？

回答

相關問題