Chapters

37 Chapters | 3:43:03 |

01

The Power of require

9:00
02

Your First Webpack

4:05
03

webpack.config.js

5:41
04

watch + Install jQuery with Yarn

7:56
05

Requiring SweetAlert2

4:09
06

Modularize our Code

7:45
07

Multiple Entries / Pages

6:15
08

Legacy Libraries & global jQuery

5:05
09

ProvidePlugin & Global Vars

4:12
10

babel-loader

4:40
11

babel-loader Options & Polyfill

4:06
12

Require CSS Files

9:30
13

Images in CSS (file-loader)

7:01
14

Bootstrap CSS & Fonts

4:00
15

Font Awesome & file-loader [hash]

4:10
16

copy-webpack-plugin

5:21
17

Sass with sass-loader

3:17
18

Bootstrap Sass & resolve-url-loader

6:28
19

Tweaking Bootstrap's Sass

4:10
20

Sourcemaps & Debugging

6:03
21

jQuery & Legacy JS in your Template

7:46
22

Passing Server Data to JS

5:34
23

FOSJsRoutingBundle

4:25
24

Lodash & requiring Partial Libraries

3:55
25

ES6 import & export

7:49
26

CommonsChunkPlugin: Shared/Vendor Entry

5:14
27

Optimizing the "Commons" Chunk

5:46
28

webpack-dev-server

6:13
29

Hot Module Replacement

6:43
30

extract-text-webpack-plugin

8:00
31

Production Build

5:09
32

Minify CSS & DefinePlugin

9:29
33

Versioning & Cache Busting

4:37
34

Versioning manifest.json

5:01
35

Versioning Optimizations

6:40
36

Code Splitting

10:58
37

Webpack Visualizer

6:50

> JavaScript Fundamentals > JavaScript for PHP Geeks: Webpack for Module Loading Awesomeness

Buy Access to Course

19.

Tweaking Bootstrap's Sass

Autoplay

Keep on Learning!

If you liked what you've learned so far, dive in! Subscribe to get
access to this tutorial plus video, code and script downloads.

Start your All-Access Pass

Buy just this tutorial for $12.00

Previous Chapter

Next Chapter

With a Subscription, click any sentence in the script to jump to that part of the video!

Now that we finally have Bootstrap's Sass working, we can celebrate! Inside _bootstrap.scss, the first thing it imports is an _variables.scss file. I'll hold Command and click to open that.

Awesome! This holds a bunch of variables that are used throughout the rest of the Sass files. Yep, this means we can override these to control colors and many other things.

Copy the $brand-primary variable line. Then, at the top of our main.scss file, before we import Bootstrap, override that variable. Make sure to remove the default.

This variable is used to color some buttons and a lot of other things. Let's make it a little lighter: change the 6.5 to 2.5. It's not important, but the new color should be #3885C7:

            Copy Code

                            Show All Lines

                        82 lines
            |
            assets/css/main.scss
        
            $brand-primary: darken(#428bca, 2.5%); // #3885c7
        
                Show Lines

                                                    // ... lines 2 - 82

Back in the browser, inspect the "I Lifted It!" button. Yep! The current color is #337AB7. Now, refresh! Check it out. Yes! It's the slightly lighter #3885C7.

So this is really the reason why you might want to import Bootstrap as Sass, instead of CSS.

Importing Only Parts of Bootstrap

Let's do one more thing! The _bootstrap.scss file imports every part of Bootstrap. But what if you don't need every part of Bootstrap? For example, we are not using the glyphicons. Importing that CSS is wasteful!

Let's fix this! Copy the entire contents of _bootstrap.scss. Then, in our css/ directory, create a new _bootstrap.scss file and paste that here.

As soon as we do that... all the paths are broken! Yea, that makes sense: we're in a different directory. No problem, I'll copy "bootstrap and do a "Find and Replace" to replace this with "~bootstrap-sass/assets/stylesheets/bootstrap. Replace everything!

            Copy Code

                        51 lines
            |
            assets/css/_bootstrap.scss
        
            // Core variables and mixins
        
            @import "~bootstrap-sass/assets/stylesheets/bootstrap/variables";
        
            @import "~bootstrap-sass/assets/stylesheets/bootstrap/mixins";
        
            // Reset and dependencies
        
            @import "~bootstrap-sass/assets/stylesheets/bootstrap/normalize";
        
            @import "~bootstrap-sass/assets/stylesheets/bootstrap/print";
        
            //@import "~bootstrap-sass/assets/stylesheets/bootstrap/glyphicons";
        
            // Core CSS
        
            @import "~bootstrap-sass/assets/stylesheets/bootstrap/scaffolding";
        
            @import "~bootstrap-sass/assets/stylesheets/bootstrap/type";
        
            @import "~bootstrap-sass/assets/stylesheets/bootstrap/code";
        
            @import "~bootstrap-sass/assets/stylesheets/bootstrap/grid";
        
            @import "~bootstrap-sass/assets/stylesheets/bootstrap/tables";
        
            @import "~bootstrap-sass/assets/stylesheets/bootstrap/forms";
        
            @import "~bootstrap-sass/assets/stylesheets/bootstrap/buttons";
        
            // Components
        
            @import "~bootstrap-sass/assets/stylesheets/bootstrap/component-animations";
        
            @import "~bootstrap-sass/assets/stylesheets/bootstrap/dropdowns";
        
            @import "~bootstrap-sass/assets/stylesheets/bootstrap/button-groups";
        
            @import "~bootstrap-sass/assets/stylesheets/bootstrap/input-groups";
        
            @import "~bootstrap-sass/assets/stylesheets/bootstrap/navs";
        
            @import "~bootstrap-sass/assets/stylesheets/bootstrap/navbar";
        
            @import "~bootstrap-sass/assets/stylesheets/bootstrap/breadcrumbs";
        
            @import "~bootstrap-sass/assets/stylesheets/bootstrap/pagination";
        
            @import "~bootstrap-sass/assets/stylesheets/bootstrap/pager";
        
            @import "~bootstrap-sass/assets/stylesheets/bootstrap/labels";
        
            @import "~bootstrap-sass/assets/stylesheets/bootstrap/badges";
        
            @import "~bootstrap-sass/assets/stylesheets/bootstrap/jumbotron";
        
            @import "~bootstrap-sass/assets/stylesheets/bootstrap/thumbnails";
        
            @import "~bootstrap-sass/assets/stylesheets/bootstrap/alerts";
        
            @import "~bootstrap-sass/assets/stylesheets/bootstrap/progress-bars";
        
            @import "~bootstrap-sass/assets/stylesheets/bootstrap/media";
        
            @import "~bootstrap-sass/assets/stylesheets/bootstrap/list-group";
        
            @import "~bootstrap-sass/assets/stylesheets/bootstrap/panels";
        
            @import "~bootstrap-sass/assets/stylesheets/bootstrap/responsive-embed";
        
            @import "~bootstrap-sass/assets/stylesheets/bootstrap/wells";
        
            @import "~bootstrap-sass/assets/stylesheets/bootstrap/close";
        
            // Components w/ JavaScript
        
            @import "~bootstrap-sass/assets/stylesheets/bootstrap/modals";
        
            @import "~bootstrap-sass/assets/stylesheets/bootstrap/tooltip";
        
            @import "~bootstrap-sass/assets/stylesheets/bootstrap/popovers";
        
            @import "~bootstrap-sass/assets/stylesheets/bootstrap/carousel";
        
            // Utility classes
        
            @import "~bootstrap-sass/assets/stylesheets/bootstrap/utilities";
        
            @import "~bootstrap-sass/assets/stylesheets/bootstrap/responsive-utilities";

Yay! Happy paths!

Next, in main.scss, import this file instead of the core one. Just, ./_bootstrap.scss.:

82 lines | assets/css/main.scss

Show Lines	// ... lines 1 - 2
	@import './_bootstrap.scss';
Show Lines	// ... lines 4 - 82

If this is all we did, nothing would change: we're still importing everything. But now... we have power! In _bootstrap.scss, comment out the glyphicons line:

51 lines | assets/css/_bootstrap.scss

Show Lines	// ... lines 1 - 7
	//@import "~bootstrap-sass/assets/stylesheets/bootstrap/glyphicons";
Show Lines	// ... lines 9 - 51

Cool! We don't need to restart Webpack after this change, but, stop it temporarily so that we can clean out the build/ directory:

rm -rf web/build/*

Now, re-run webpack:

./node_modules/.bin/webpack --watch

Check it out! In web/build, we still have the Font Awesome fonts... but we do not have the glyphicon fonts anymore. That's awesome! We're not parsing the _glyphicons.scss file anymore, so Webpack never sees those font files and so never moves them. This is proof that our CSS file is now just a little bit smaller.

Ok, let's add some sourcemaps to make debugging a lot nicer.

11 Comments

Sort By

Radoje Albijanic 6 years ago

Hi folks,

I have phpStorm complaining about @import with `~` and marking error "Cannot resolve import into sass/scss file" when importing module assets. Any ideas?

1 | Reply |

weaverryan SFCASTS Radoje Albijanic 6 years ago edited

Hey Radoje Albijanic!

Do you get an error from Webpack or just the warning from PhpStorm? Since the `~` thing is something special from Webpack, it's likely that PhpStorm just doesn't understand this syntax, which is unfortunate, but not a big problem :). You could also use the full path to a module - '../../node_modules/module_name/path/to/file.sass` - but it's kind of annoying ;).

Cheers!

| Reply |

Radoje Albijanic weaverryan 6 years ago

Hey Ryan,

Webpack is cool, PhpStorm is the one making trouble :). Nothing special, its just annoying to see that red line, and i didnt see it in the video so I thought there is some catch :)

3 | Reply |

weaverryan SFCASTS Radoje Albijanic 6 years ago

Ah yea. I'm a bit surprised that PhpStorm doesn't understand that syntax yet - they've improved their Webpack support, but it's not perfect yet, for sure!

| Reply |

Wei lun L. 5 years ago

When I change to $brand-primary: darken(#428bca, 2.5%); , It still #337ab7 . Why?
It didn't work anymore?

| Reply |

Victor SFCASTS Wei lun L. 5 years ago

Hey Kevin,

Probably browser's cache? Try to open the page in Chrome Incognito mode, do you still see no changes?

Cheers!

| Reply |

Wei lun L. Victor 5 years ago

Finally, I found my export path is wrong, thank you.

| Reply |

Victor SFCASTS Wei lun L. 5 years ago

Hey Kevin,

Glad you got it working! And thank you for sharing your solution - it might be useful for other users.

Cheers!

| Reply |

Wei lun L. Wei lun L. 5 years ago

{
"name": "javascript",
"version": "1.0.0",
"main": "index.js",
"repository": "git@github.com:knpuniversity/javascript.git",
"author": "Ryan Weaver <ryan@thatsquality.com>",
"license": "MIT",
"devDependencies": {
"@babel/core": "^7.1.2",
"@babel/preset-env": "^7.1.0",
"babel-loader": "^8.0.4",
"bootstrap-sass": "^3.3.7",
"copy-webpack-plugin": "^4.6.0",
"css-loader": "^1.0.0",
"file-loader": "^2.0.0",
"font-awesome": "^4.7.0",
"jquery": "^3.3.1",
"node-sass": "^4.10.0",
"resolve-url-loader": "^3.0.0",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"sweetalert2": "^7.24.4",
"webpack": "^4.20.2",
"webpack-cli": "^3.1.2"
},
"dependencies": {
"babel-polyfill": "^6.26.0"
}
}

| Reply |

Wei lun L. Wei lun L. 5 years ago

{
test: /\.scss$/,
use: [
'style-loader',
'css-loader',
'resolve-url-loader',
'sass-loader?sourceMap',
]
},

| Reply |

Wei lun L. Wei lun L. 5 years ago

$brand-primary: darken(#428bca, 2.5%) ; // #337ab7
$bootstrap-sass-asset-helper: true;

@import '~bootstrap-sass/assets/stylesheets/_bootstrap.scss';
@import '~font-awesome/css/font-awesome.css';

| Reply |

This tutorial explains the concepts of an old version of Webpack using an old version of Symfony. The most important concepts are still the same, but you should expect significant differences in new versions.

Symfony 3 Webpack 3

What PHP libraries does this tutorial use?

// composer.json
{
    "require": {
        "php": "^7.2.0",
        "symfony/symfony": "3.3.*", // v3.3.16
        "twig/twig": "2.10.*", // v2.10.0
        "doctrine/orm": "^2.5", // v2.7.0
        "doctrine/doctrine-bundle": "^1.6", // 1.10.3
        "doctrine/doctrine-cache-bundle": "^1.2", // 1.3.5
        "symfony/swiftmailer-bundle": "^2.3", // v2.6.3
        "symfony/monolog-bundle": "^2.8", // v2.12.1
        "symfony/polyfill-apcu": "^1.0", // v1.4.0
        "sensio/distribution-bundle": "^5.0", // v5.0.22
        "sensio/framework-extra-bundle": "^3.0.2", // v3.0.26
        "incenteev/composer-parameter-handler": "^2.0", // v2.1.2
        "friendsofsymfony/user-bundle": "^2.0", // v2.1.2
        "doctrine/doctrine-fixtures-bundle": "~2.3", // v2.4.1
        "doctrine/doctrine-migrations-bundle": "^1.2", // v1.3.2
        "composer/package-versions-deprecated": "^1.11", // 1.11.99
        "friendsofsymfony/jsrouting-bundle": "^1.6" // 1.6.0
    },
    "require-dev": {
        "sensio/generator-bundle": "^3.0", // v3.1.6
        "symfony/phpunit-bridge": "^3.0" // v3.3.5
    }
}

What JavaScript libraries does this tutorial use?

// package.json
{
    "dependencies": [],
    "devDependencies": {
        "babel-core": "^6.25.0", // 6.25.0
        "babel-loader": "^7.1.1", // 7.1.1
        "babel-plugin-syntax-dynamic-import": "^6.18.0", // 6.18.0
        "babel-preset-env": "^1.6.0", // 1.6.0
        "bootstrap-sass": "^3.3.7", // 3.3.7
        "clean-webpack-plugin": "^0.1.16", // 0.1.16
        "copy-webpack-plugin": "^4.0.1", // 4.0.1
        "core-js": "^2.4.1", // 2.4.1
        "css-loader": "^0.28.4", // 0.28.4
        "extract-text-webpack-plugin": "^3.0.0", // 3.0.0
        "file-loader": "^0.11.2", // 0.11.2
        "font-awesome": "^4.7.0", // 4.7.0
        "jquery": "^3.2.1", // 3.2.1
        "lodash": "^4.17.4", // 4.17.4
        "node-sass": "^4.5.3", // 4.5.3
        "resolve-url-loader": "^2.1.0", // 2.1.0
        "sass-loader": "^6.0.6", // 6.0.6
        "style-loader": "^0.18.2", // 0.18.2
        "sweetalert2": "^6.6.6", // 6.6.6
        "webpack": "^3.4.1", // 3.4.1
        "webpack-chunk-hash": "^0.4.0", // 0.4.0
        "webpack-dev-server": "^2.6.1", // 2.6.1
        "webpack-manifest-plugin": "^1.2.1" // 1.2.1
    }
}

Previous Chapter

Next Chapter

Tweaking Bootstrap's Sass

Share this awesome video!

Keep on Learning!

Importing Only Parts of Bootstrap

11 Comments

Delete comment?

What PHP libraries does this tutorial use?

What JavaScript libraries does this tutorial use?

	$brand-primary: darken(#428bca, 2.5%); // #3885c7
Show Lines	// ... lines 2 - 82

	// Core variables and mixins
	@import "~bootstrap-sass/assets/stylesheets/bootstrap/variables";
	@import "~bootstrap-sass/assets/stylesheets/bootstrap/mixins";

	// Reset and dependencies
	@import "~bootstrap-sass/assets/stylesheets/bootstrap/normalize";
	@import "~bootstrap-sass/assets/stylesheets/bootstrap/print";
	//@import "~bootstrap-sass/assets/stylesheets/bootstrap/glyphicons";

	// Core CSS
	@import "~bootstrap-sass/assets/stylesheets/bootstrap/scaffolding";
	@import "~bootstrap-sass/assets/stylesheets/bootstrap/type";
	@import "~bootstrap-sass/assets/stylesheets/bootstrap/code";
	@import "~bootstrap-sass/assets/stylesheets/bootstrap/grid";
	@import "~bootstrap-sass/assets/stylesheets/bootstrap/tables";
	@import "~bootstrap-sass/assets/stylesheets/bootstrap/forms";
	@import "~bootstrap-sass/assets/stylesheets/bootstrap/buttons";

	// Components
	@import "~bootstrap-sass/assets/stylesheets/bootstrap/component-animations";
	@import "~bootstrap-sass/assets/stylesheets/bootstrap/dropdowns";
	@import "~bootstrap-sass/assets/stylesheets/bootstrap/button-groups";
	@import "~bootstrap-sass/assets/stylesheets/bootstrap/input-groups";
	@import "~bootstrap-sass/assets/stylesheets/bootstrap/navs";
	@import "~bootstrap-sass/assets/stylesheets/bootstrap/navbar";
	@import "~bootstrap-sass/assets/stylesheets/bootstrap/breadcrumbs";
	@import "~bootstrap-sass/assets/stylesheets/bootstrap/pagination";
	@import "~bootstrap-sass/assets/stylesheets/bootstrap/pager";
	@import "~bootstrap-sass/assets/stylesheets/bootstrap/labels";
	@import "~bootstrap-sass/assets/stylesheets/bootstrap/badges";
	@import "~bootstrap-sass/assets/stylesheets/bootstrap/jumbotron";
	@import "~bootstrap-sass/assets/stylesheets/bootstrap/thumbnails";
	@import "~bootstrap-sass/assets/stylesheets/bootstrap/alerts";
	@import "~bootstrap-sass/assets/stylesheets/bootstrap/progress-bars";
	@import "~bootstrap-sass/assets/stylesheets/bootstrap/media";
	@import "~bootstrap-sass/assets/stylesheets/bootstrap/list-group";
	@import "~bootstrap-sass/assets/stylesheets/bootstrap/panels";
	@import "~bootstrap-sass/assets/stylesheets/bootstrap/responsive-embed";
	@import "~bootstrap-sass/assets/stylesheets/bootstrap/wells";
	@import "~bootstrap-sass/assets/stylesheets/bootstrap/close";

	// Components w/ JavaScript
	@import "~bootstrap-sass/assets/stylesheets/bootstrap/modals";
	@import "~bootstrap-sass/assets/stylesheets/bootstrap/tooltip";
	@import "~bootstrap-sass/assets/stylesheets/bootstrap/popovers";
	@import "~bootstrap-sass/assets/stylesheets/bootstrap/carousel";

	// Utility classes
	@import "~bootstrap-sass/assets/stylesheets/bootstrap/utilities";
	@import "~bootstrap-sass/assets/stylesheets/bootstrap/responsive-utilities";