Enabling Sass, Less, Vue and React

• Sass/SCSS
• Less
• Vue.js
• React

By using Webpack Encore to manage frontend assets, Sass, Less, Vue and React can be used with UserFrosting out of the box.

Sass/SCSS#

To enable Sass/SCSS support, first enable Sass loader inside webpack.config.js, install the required npm dependencies, and restart Webpack.

1. Edit webpack.config.js

   webpack.config.js

   Encore
       // ...
   
       // enables Sass/SCSS support
       .enableSassLoader()
   
       // ...
   ;
   

2. Install npm dependencies

   npm install sass-loader@^13.0.0 sass --save-dev
   

3. Restart Encore

   php bakery assets:webpack
   
   # or
   
   npm run dev
   

Sass can now be imported in your entry files:

app/assets/main.js

- import './styles/app.css';
+ import './styles/app.scss';

For more information, check out Encore Documentation

Less#

To enable Less support, first enable Less loader inside webpack.config.js, install the required npm dependencies, and restart Webpack.

1. Edit webpack.config.js

   webpack.config.js

   Encore
       // ...
   
       // enables Less support
       .enableLessLoader()
   
       // ...
   ;
   

2. Install npm dependencies

   npm install less-loader@^11.0.0 --save-dev
   

3. Restart Encore

   php bakery assets:webpack
   
   # or
   
   npm run dev
   

For more information, check out Encore Documentation

Vue.js#

To enable Vue.js support, first enable Vue Loader inside webpack.config.js:

webpack.config.js

Encore
    // ...

    // enables Vue Loader
    .enableVueLoader()

    // ...
;

Then restart Encore. When you do, it will give you a command you can run to install any missing dependencies. After running that command and restarting Encore, you're done!

Any .vue files that you require will be processed correctly. You can also configure the vue-loader options by passing an options callback to enableVueLoader().

For more information, check out Encore Documentation.

React#

Using React? First add some dependencies with npm:

npm install react react-dom prop-types --save

Enable react in your webpack.config.js:

  Encore
      // ...
     .enableReactPreset()
  ;

Then restart Encore. When you do, it will give you a command you can run to install any missing dependencies. After running that command and restarting Encore, you're done!

Your .js and .jsx files will now be transformed through babel-preset-react.

For more information, check out Encore Documentation