Install StartBootstrap-SB-Admin using Yarn

Question

Install StartBootstrap-SB-Admin using Yarn

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

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

Now I'm using Yarn and WebPack through Webpack Encore .

I am having difficulty integrating the required libs from SB-Admin into CSS and JS.

I installed Node 8, Yarn, and then executed the commands below in 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 for the webpack which is not supported by the filesystem generating the error below.

error An 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've included the following line in my .js file in my assets

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

When I run c:\projetos\skel> yarn run encore dev everything works fine, but I do not understand the inclusion of CSSes or theme JSes in compiled final files.

php webpack yarn symfony4

asked by anonymous 15.02.2018 / 23:26

2 answers

Delete gallery image Dropzone.js Asp.net CodeBlock with MingW to create .xll file

score 0 · Answer 1

In your ~ assets / js / app.js try to use import instead of require

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

Do not forget to run $ yarn run encore dev after performing this update.

score 0 · Answer 2

I discovered the problem of not working with the sequence I was using.

The current version of Startbootstrap-SB-Admin is already running Bootstrap 4 while bootstrap-sass is still being installed as Bootstrap 3. So it was really happening as it should, except that SB-Admin no longer works with Bootstrap 3.

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

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

$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';