Enabling Sass, Less, Vue and 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

Sass is enabled by default in UserFrosting 5, as it's required by the AdminLTE Theme.

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

Edit webpack.config.js

webpack.config.js

Encore
    // ...

    // enables Sass/SCSS support
    .enableSassLoader()

    // ...
;

Install npm dependencies

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

Restart Encore
```
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.

Edit webpack.config.js

webpack.config.js

Encore
    // ...

    // enables Less support
    .enableLessLoader()

    // ...
;

Install npm dependencies

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

Restart Encore
```
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.

Future version of UserFrosting will make use of Vue.JS. You can checkout a proof of concept of a Vue based interface running inside UserFrosting on Github

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