Chapters
37 Chapters
|
3:43:03
|
Login to bookmark this video
-
Course Code
Subscribe to download the code!Compatible PHP versions: ^7.2.0
Subscribe to download the code!Compatible PHP versions: ^7.2.0
-
This Video
Subscribe to download the video!
Subscribe to download the video!
-
Subtitles
Subscribe to download the subtitles!
Subscribe to download the subtitles!
-
Course Script
Subscribe to download the script!
Subscribe to download the script!
19.
Tweaking Bootstrap's Sass
Scroll down to the script below, click on any sentence (including terminal blocks) to jump to that spot in the video!
Subscribe to jump to this part in the video!
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.
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.
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
}
}
11 Comments
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?
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!
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 :)
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!
When I change to $brand-primary: darken(#428bca, 2.5%); , It still #337ab7 . Why?
It didn't work anymore?
Hey Kevin,
Probably browser's cache? Try to open the page in Chrome Incognito mode, do you still see no changes?
Cheers!
Finally, I found my export path is wrong, thank you.
Hey Kevin,
Glad you got it working! And thank you for sharing your solution - it might be useful for other users.
Cheers!
{
"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"
}
}
{
test: /\.scss$/,
use: [
'style-loader',
'css-loader',
'resolve-url-loader',
'sass-loader?sourceMap',
]
},
$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';
"Houston: no signs of life"
Start the conversation!