elliotk's avatar

Using Bootswatch with Laravel 5.4

I thought I'd share how simple it is to use Bootswatch in Larvel 5.4 with this guide.

Create a fresh Laravel install.

laravel new mynewproject

Then, install the Bootswatch dependancies via npm.

npm install bootswatch

Following this, edit your resources/assets/saas/app.scss


// Fonts
@import url(https://fonts.googleapis.com/css?family=Raleway:300,400,600);

// Variables
// @import "variables"; - Default variables included with laravel no longer required

// Bootswatch Variables for your chosen theme
@import "node_modules/bootswatch/flatly/variables";

// Bootstrap
@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";

// Bootswatch theme main CSS files
@import "node_modules/bootswatch/flatly/bootswatch";

Install your npm dependancies.

npm install

Finally, compile your saas.

npm run dev

You should then be using your chosen Bootswatch theme, in this case "flatly".

0 likes
2 replies
Radi's avatar

Hi I followed all steps and I getting:

Module build failed: ModuleBuildError: Module build failed:
undefined    

Incompatible units: 'rem' and 'px'.
      in D:\xampp2\htdocs\project\node_modules\bootstrap\scss\_variables.scss (line 444, column 34)
    at runLoaders (D:\xampp2\htdocs\project\node_modules\webpack\lib\NormalModule.js:192:19)
    at D:\xampp2\htdocs\project\node_modules\loader-runner\lib\LoaderRunner.js:364:11
    at D:\xampp2\htdocs\project\node_modules\loader-runner\lib\LoaderRunner.js:230:18
    at context.callback (D:\xampp2\htdocs\project\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
    at Object.asyncSassJobQueue.push [as callback] (D:\xampp2\htdocs\project\node_modules\sass-loader\lib\loader.js:51:13)
    at Object.<anonymous> (D:\xampp2\htdocs\project\node_modules\sass-loader\node_modules\async\dist\async.js:2243:31)
    at Object.callback (D:\xampp2\htdocs\project\node_modules\sass-loader\node_modules\async\dist\async.js:906:16)
    at options.error (D:\xampp2\htdocs\project\node_modules\node-sass\lib\index.js:294:32)

any idea hot wo fix?

1 like
keyurdpatel's avatar

@import "node_modules/bootswatch/dist/lumen/variables";

// Bootstrap @import '~bootstrap/scss/bootstrap';

// Bootswatch theme main CSS files @import "node_modules/bootswatch/dist/lumen/bootswatch";

I think to try this out. okay!!

Please or to participate in this conversation.