CODEWITHSUNDEEP
csssymfonysass
MrLumbergh
MrLumbergh

Reputation: 73

How to make SASS work in Symfony3 project?

I have a Symfony3 project and want to use SASS for my stylesheets.

I have looked up many pages and found Assetic related threads - but no "real" explanation, how to integrate SASS in a Symfony3 project.

Can't be too difficult, can it?

I would be glad to hear any hint or complete "how to" - thanks a bunch!

Upvotes: 1

Views: 536

Answers (1)

OK sure
OK sure

Reputation: 2656

I create a separate frontend build process using NPM for this which can handle all images, SASS/CSS, and JS with compression etc. and then add a build step to generate everything.

If you don't have NPM, follow instructions to install: https://www.npmjs.com/get-npm

Initialise the project by running npm init in your project directory.

Install some tools for compiling and compressing:

npm install node-sass --save-dev this compiles SASS to CSS

npm install postcss-cli --save-dev this processes compiled CSS

npm install cssnano --save-dev this minifies CSS and is used as a plugin for postcss

npm install autoprefixer --save-dev this adds moz, webkit and vendor prefixes and is used as a plugin for postcss

npm install npm-run-all --save-dev this isn't strictly necessary but allows you to group commands which is helpful as you add more steps.

Once you've got these dependencies installed, you can add your build scripts. Open package.json and modify the scripts key.

{
  "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:*"
  },
  ...
}

You can now run npm run build. build-task:scss-compile will compile your SASS into a single, uncompressed CSS file in the web/css directory which can be linked to in your templates. Then build-task:css-minify will compress it and add any vendor prefixes to the CSS.

You can add more build tasks as mentioned above and chain them in this way. You can also add file watchers and a watch command which will run the build scripts when any watched files are modified.

Don't forget to add node_modules to your .gitignore file.

The reason I opt for a separate process over something like Assetic and leafo/scss as outlined in the Symfony docs is that Assetic filters add a lot of overhead to responses as they compress things on the fly which will slow down development considerably. It also separates concerns between application and presentation and gives you more flexibility to later build on and adapt your front end without touching your application.

EDIT: Here is a gist of a package.json file that will also copy jQuery, FontAwesome, anything in the assets directory including any images or fonts, compile and minify JavaScripts, after checking them for errors and create required directories if they don't already exist and a file watcher for building when files are modified: https://gist.github.com/matt-halliday/6b9a3a015b7a87c5b165ce1a9ae19c9b

Upvotes: 2

Related Questions