Uploaded image for project: 'PUBLIC - Liferay Portal Community Edition'
  1. PUBLIC - Liferay Portal Community Edition
  2. LPS-138656

As a frontend CSS developer, I would like to use SASS easily in the fragment toolkit




      Since SASS is the most common CSS preprocessor and most of the CSS projects are build based on SASS, I think that providing an easy way to build CSS can be a really interesting and useful option.

      This need has been highlighted by some teams which need to migrate their sites to Liferay onLine.


      How should this work?

      An example of use could be:
      If I add to my fragment an `index.scss` this file will be compiled as `index.css` in this way the user will be able to edit the compiled CSS in the Liferay interface and be totally aware of the process.
      Another option that hides the final CSS or makes it not editable could be not totally useful for frontend CSS developers.


      Is there any implementation example?

      There is a 2020 PR about this and looks great:


      How to verify that the process has been successful?

      We will only have to validate that when using .scss files in the `scss` directory, at the moment of the build or import of fragments, a task will compile the .scsss file to .css



      Test Scenarios

      Test Scenarios Test Strategy Kind of test Is it covered by FrontEnd ? (JS-Unit) Is it covered by BackEnd ? (unit or integration) Could it be covered by POSHI?
      The styles.scss file will be translated to .css extension when build the fragment using fragment toolkit Critical Manual TBD TBD No
      The styles.scss file will be translated to .css extension when import the fragment to portal using fragment toolkit Critical Manual TBD TBD No


        Issue Links



              david.gutierrez David Gutiérrez Mesa
              marcos.castro Marcos Castro
              Pablo Molina Pablo Molina
              Eudaldo Alonso Eudaldo Alonso
              Pablo Molina
              1 Vote for this issue
              1 Start watching this issue




                  Version Package