// composer.json
{
"require": {
"php": "^7.2.0",
"ext-iconv": "*",
"composer/package-versions-deprecated": "^1.11", // 1.11.99
"doctrine/doctrine-bundle": "^1.6", // 1.8.1
"doctrine/doctrine-cache-bundle": "^1.2", // 1.3.2
"doctrine/doctrine-fixtures-bundle": "~3.0", // 3.0.2
"doctrine/doctrine-migrations-bundle": "^1.2", // v1.3.1
"doctrine/orm": "^2.5", // v2.7.2
"friendsofsymfony/jsrouting-bundle": "^2.2", // 2.2.0
"friendsofsymfony/user-bundle": "dev-master", // dev-master
"sensio/framework-extra-bundle": "^5.1", // v5.1.5
"symfony/asset": "^4.0", // v4.0.4
"symfony/console": "^4.0", // v4.0.4
"symfony/flex": "^1.0", // v1.17.6
"symfony/form": "^4.0", // v4.0.4
"symfony/framework-bundle": "^4.0", // v4.0.4
"symfony/lts": "^4@dev", // dev-master
"symfony/monolog-bundle": "^3.1", // v3.1.2
"symfony/polyfill-apcu": "^1.0", // v1.7.0
"symfony/serializer-pack": "^1.0", // v1.0.1
"symfony/swiftmailer-bundle": "^3.1", // v3.1.6
"symfony/twig-bundle": "^4.0", // v4.0.4
"symfony/validator": "^4.0", // v4.0.4
"symfony/yaml": "^4.0", // v4.0.4
"twig/twig": "2.10.*" // v2.10.0
},
"require-dev": {
"symfony/debug-pack": "^1.0", // v1.0.4
"symfony/dotenv": "^4.0", // v4.0.4
"symfony/phpunit-bridge": "^4.0", // v4.0.4
"symfony/web-server-bundle": "^4.0" // v4.0.4
}
}
// package.json
{
"devDependencies": {
"@symfony/webpack-encore": "^0.19.0", // 0.19.0
"bootstrap": "3", // 3.3.7
"copy-webpack-plugin": "^4.4.1", // 4.4.1
"font-awesome": "4", // 4.7.0
"jquery": "^3.3.1", // 3.3.1
"node-sass": "^4.7.2", // 4.7.2
"sass-loader": "^6.0.6", // 6.0.6
"sweetalert2": "^7.11.0", // 7.11.0
"webpack-notifier": "^1.5.1" // 1.5.1
}
}
21 Comments
Aha took what I learn't here and built an automated workflow using webpack-encore.
The project is called QuickStart_basic, with the intension to create different versions for different usages.
Quickstart_basic is for Html - Scss - Js projects.
Checkout the link .. And please comment your remarks.
https://github.com/ScorpioC...
Hey Kribo!
Ah, cool! It's skeleton for Encore - I love it! If you add a postcss.config.js file, you could also enable the postCss loader, which i really nice :).
Cheers!
OMG nooooo what's a postcss oboy did I miss something in your tut
Haha, I don't think we talked about it, but it's a nice feature ;). Try
enablePostCssLoader(). The error message will guide you through the rest. This biggest reason this is usually used is with autoprefixer, so you can get vendor prefixes, etc.Cheers!
aha .. So I like new features...
So here's the upgrade with Postcss & Autoprefixer
https://github.com/ScorpioC...
The only thing bothering me is the sequences within webpack.config.js
the order, which comes first is something I could use your advice on. Is there a general rule of thumb ??
Hey Kribo!
Do you mean the order of the addEntry() calls? Or the order of all of the functions inside of webpack.config.js? In either case, the order doesn't matter. For all of the functions, I typically put the outputPath & publicPath on top, then the entries, then the rest of the stuff, which typically configured extra features.
Btw, I usually try not to use addStyleEntry(), and instead require whatever CSS I need from inside app.js (or from inside other files required by app.js). That's a more "correct" way of doing things but... the style entry definitely works fine.
Cheers!
Ryan I've got a question?
I've installed bootstrap 4.1.3 and now I need popper.js.
But how do integrate popper into webpack?
Do I do the following in webpack.config.js
`
.createSharedEntry('js/common', ['jquery', 'popper.js'])
`
With the order I mean Do I first do PostCss and the styleEntry or the other way round. ?
Adding your 'app.css' file into your 'app.js' file is the webpack way but just feels sloppy so I prefer to add it to webpack-config.js file.
Hey Kribo!
> Do I first do PostCss and the styleEntry or the other way round.
It makes no difference :). Encore generates the same configuration either way.
> I've installed bootstrap 4.1.3 and now I need popper.js.
> But how do integrate popper into webpack?
Hmm. I'm not actually sure - as I haven't tried it yet. It depends on how Bootstrap's JavaScript is configured. Honestly, I would install jquery & popper.js (as you certainly have), and then just import only bootstrap. If that gives you an error, you may need to use autoProviderjQuery(), but we would have to see :).
Cheers!
Greate course! Could you help me with the following question? I want to dynamicly load some styles depending on the required feature (let's say dropdown menu requires both dropdown.js and additional dropdown styles). Is there a way in the Webpack to ask for predifined scss mixins directly from a js module? Or should I add to the every js module "import" to its corrsponding scss file, which will have only 1 line, like "@include dropdown-styles"?
Hey Teo!
Well, thank you! :)
About your question... hmmm... In short, Webpack isn't aware of able to work directly with any scss mixins (and, full disclosure, I am NOT an expert on scss mixings specifically, os apologies if I say something dumb :p). Well, to be more specific, Webpack simply knows how to load ".scss" files. So, yes, I think you will need to "import" the corresponding scss file, because only a .scss itself can activate the mixin.
I don't know if that satisfies your answer or not :). There is this load - https://github.com/shakacod... - I'm not sure if that hits your issue, or if it's something different. It looks just like a shortcut to help not needing the "import" in multiple places.
Cheers!
Thanks again! You did answer my question (only a .scss itself can activate the mixin).
I wanted to know if there is an easy way to control js and scss dependencies from one place (one file). Right now to activate the dropdown feature of Foundation framework, we need to attach the export from "dropdown-menu.js" module to our global Foundation class AND add to the same page's scss:
`@include foundation-dropdown-menu;
`That maybe not much to do/keep in your head, but it can become a problem if you're not so familar with the library or there a lot of them in your project. So it's not quite easy to turn different features on/off.
And thank you for the sass-resources-loader. It's not quite what I asked, but still very useful.
Hey Teo
I'm not sure if this is the best way to do it, but it may work well for you. You can create a "main.js" file that will include all the common imports of your site, so then you can include it on your "base" template
Hi, Diego!
You're right. I can include all assets into every page (make everything shared). Taking into account the modern internet speeds and CPU powers, that, most likely, will not have any negative impact on the end-user expirience (at least in non highload enterprise solutions with millions visitors). It's just... for me that just defeats the whole idea of assets management.
On the one hand, I'm perfectionist. I want to have the perfect solution (the common flaw of all programmers). On the another hand, I'm a lazy man. I want to find the easiest solution. So I want to have the bare minimum of the required assets per each page, but make that as flexible and easy to manage as possible.
Haha, I got you, we all seek for the best but easiest solution. What you could do is to have a few "base" templates, one for your users common sections, another one for your admin area, and so on
I'm trying to install the sass-loader.
Added the .enableSassLoader() to webpack.config.js
After running this command:
yarn add sass-loader node-sass --dev
Both packages are installed
When i run the command: yarn run encore dev --watch i get the following error
How could i solve this?
Fixed by running the following command: npm rebuild node-sass
Hey Bertin
Ohh, interesting. Did you change your OS
Cheers!
@Diego Aguiar
I did not changed my os after running this command:
rebuild node-sass it works again.
Hey Bertin!
Hmm. I feel like I've gotten this error before too, but I can't remember exactly why it happened (though, I think it was because I was upgrading Node or something somewhat significant in the background). I can't explain what happened in this case :/. You'll notice that when you add node-sass (or even if you already have node-sass in package.json, but delete node_nodules and run
yarn installagain), you will see node-sass compiling a C binary. Actually, I'm not too familiar with this process - I think some operating systems may have binaries available that are quickly downloaded, while other OS's need to recompile. The point is this: whatever node-sass needs to do, should be done right after the node-sass library is installed. In your case, that didn't happen, but I'm not sure why.So, I'm not sure that helps... but maybe the extra background info is useful :).
Cheers!
This error sounds familiar. I've come across it also.
And I think it had something to do with Yarn not rebuilding node-sass.
I stopped using yarn, npm only and the issue was updated and everything turned out fine. Try installing via npm.
Hey Kribo,
Thanks for this suggestion! Hm, that's interesting, I'd say the reason is different than just stop using Yarn and use NPM only, because Yarn actually do use NPM. I think your dependencies were locked with outdated versions, so when you ran "npm install" - it installed latest versions and that's why you didn't see the error. I bet you would not see the error with "yarn upgrade" too.
Cheers!
"Houston: no signs of life"
Start the conversation!