Install Startbootstrap-SB-Admin using Yarn

Question

I am creating a skeleton base for my applications and I intend to use Symfony 4 and Startbootstrap-SB-Admin. I already have a skeleton design using Symfony 3 and SB-Admin-2 and another with Silex. These last ones I created using bower within the document_root.

Now I’m using Yarn and Webpack through the Webpack Encore.

I’m having trouble integrating into CSS and JS compiled the necessary libs of SB-Admin.

I installed Node 8, Yarn and then ran the below commands on Windows.

yarn add popper.js
yarn add @symfony/webpack-encore --dev
yarn add sass-loader node-sass --dev
yarn add jquery --dev
yarn add bootstrap-sass --dev
yarn add startbootstrap-sb-admin --dev

The modules were included in ~node_modules/ *

NOTE: I am using Vagrant with a shared Windows/Linux directory and on Linux the Yarn commands try to create symlinks to the webpack which is not supported by filesystem generating the error below.

error An Unexpected error occurred: "EPROTO: Protocol error, symlink '.. /.. /.. /... /webpack/bin/webpack.js' -> '/Vagrant/skel/node_modules/@symfony/webpack-encore/node_modules/. bin/webpack'"

Below some lines of the files

~templates/layout.html.Twig

<!-- Application CSS -->
<link rel="stylesheet" href="{{ asset('build/app.css') }}">
<!-- App main JS -->
<script src="{{ asset('build/app.js') }}"></script>

~Assets/js/app.js

require('../css/app.scss');

var $ = require('jquery');
require('bootstrap-sass');
require('startbootstrap-sb-admin/scss/sb-admin.scss');

~Assets/css/app.scss

$icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/";
$fa-font-path: "~font-awesome/fonts";
$brand-primary: darken(#428bca, 20%);
@import '~bootstrap-sass/assets/stylesheets/bootstrap';
// Tentei usar import aqui
// @import '~startbootstrap-sb-admin/scss/sb-admin.scss';

PROBLEM

I got stuck on including the line below in my file .js in my assets

  require('startbootstrap-sb-admin/scss/sb-admin.scss');

When I execute c:\projetos\skel> yarn run encore dev everything goes well, but I don’t understand the inclusion of the Csses or the Jses of the theme in the compiled final files.

Answer 1

In his ~Assets/js/app.js try to use the import instead of require

import 'startbootstrap-sb-admin/scss/sb-admin.scss';

Don’t forget to rotate $ yarn run encore dev after making this update.

Answer 2

I ended up discovering the problem of not working with the sequence I was using.

The current version of Startbootstrap-SB-Admin is already using Bootstrap 4 while bootstrap-Sass is still being installed as Bootstrap 3. So in fact it was all happening as it should except for the fact that SB-Admin no longer works with Bootstrap 3.

So I added the most current bootstrap with yarn add bootstrap --dev and changed the line require('bootstrap-sass'); for require('bootstrap'); and then everything started working normally.

How was the file ~Assets/js/app.js

require('../css/app.scss');
var $ = require('jquery');
require('fontawesome');
require('bootstrap');
require('startbootstrap-sb-admin/js/sb-admin');

and the file ~Assets/css/app.scss

$icon-font-path: "~font-awesome/fonts/";
$fa-font-path: "~font-awesome/fonts";
$brand-primary: darken(#428bca, 20%);
@import '~startbootstrap-sb-admin/vendor/font-awesome/scss/font-awesome.scss';
@import '~bootstrap/scss/bootstrap.scss';
@import '~startbootstrap-sb-admin/scss/sb-admin.scss';