I'm working on a Symfony 4 project with Webpack Encore for asset management.
I configured my local server with this : https://stackoverflow.com/a/15864222/5158153
I can access to localhost from my Android device but it doesn't get access to any asset.
I tried with another project (not Symfony) and it can get assets.
I think there's something I forgot with webpack config but I don't know what.
Webpack-config.js
const Encore = require('#symfony/webpack-encore');
Encore
.setOutputPath('public/build/')
.setPublicPath('http://localhost/tharmo/public/build')
.setManifestKeyPrefix('build/')
.cleanupOutputBeforeBuild()
.enableSourceMaps(!Encore.isProduction())
.autoProvidejQuery()
.createSharedEntry('vendor', [
'./assets/js/custom.js',
'materialize-css',
])
.addEntry('app', './assets/js/app.js')
.enableSassLoader()
;
module.exports = Encore.getWebpackConfig();
base.html.twig
<link type="text/css" rel="stylesheet" href="{{ asset('build/app.css') }}"
media="screen,projection" />
It works correctly in Windows where Wamp server is installed but not in Android.
On Android device, if I type the url, I can get the asset so something is wrong with the way I get asset in Twig.
Related
From a new Symfony 4 project, when I run this command :
./node_modules/.bin/encore dev-server --hot
And then I modify a scss file (change the the body tag background-color by example), the shell react
But my browser does not automatically refresh ! I always have to reload manually the page for see the latest css change. Where may I do a mystake ?
Thank you !
=> I tested with different browsers
=> If I modify a custom javascript file, the browser autorefresh ! in contrary when I change the scss file
=> My assets directory structure :
=> My webpack.config.js content :
var Encore = require('#symfony/webpack-encore');
Encore
// directory where compiled assets will be stored
.setOutputPath('public/build/')
// public path used by the web server to access the output path
.setPublicPath('/build')
// only needed for CDN's or sub-directory deploy
//.setManifestKeyPrefix('build/')
/*
* ENTRY CONFIG
*
* Add 1 entry for each "page" of your app
* (including one that's included on every page - e.g. "app")
*
* Each entry will result in one JavaScript file (e.g. app.js)
* and one CSS file (e.g. app.css) if you JavaScript imports CSS.
*/
.addEntry('app', './assets/js/app.js')
.addEntry('article/main', './assets/js/article/main.js')
.addStyleEntry('article/style','./assets/css/article/style.scss')
//.addEntry('page2', './assets/js/page2.js')
/*
* FEATURE CONFIG
*
* Enable & configure other features below. For a full
* list of features, see:
* https://symfony.com/doc/current/frontend.html#adding-more-features
*/
.cleanupOutputBeforeBuild()
.enableBuildNotifications()
.enableSourceMaps(!Encore.isProduction())
// enables hashed filenames (e.g. app.abc123.css)
.enableVersioning(Encore.isProduction())
// enables Sass/SCSS support
.enableSassLoader()
// uncomment if you use TypeScript
//.enableTypeScriptLoader()
// uncomment if you're having problems with a jQuery plugin
//.autoProvidejQuery()
;
module.exports = Encore.getWebpackConfig();
=> And my automatically generated public/build/manifest.json file :
considering the documentation here the Hot Module Replacement (HMR) doesn't work for everything at the moment. It should work for Vue.js but that's all.
For more informations you can check the documentation for HMR.
TL:DR Your custom js & css assets are not supposed to be hot reloaded in the current state of HMR. You'll have to reload your browser manually. I don't know if you know about the --watch option, but it'll allow you to compile your code every time a file has changed.
Good luck
I tried to follow instructions from documentation but it doesn't work.
Documentation: https://symfony.com/doc/current/frontend/encore/simple-example.html
The code I have:
assets/js/app.js
require('./assets/css/app.scss');
const $ = require('jquery');
in webpackconfig
.setOutputPath('public/build/')
.setPublicPath('/build')
.addEntry('js', './assets/js/app.js')
.enableSassLoader()
.autoProvidejQuery()
const $ = require('jquery');
base.html.twig
{% block stylesheets %}
<link rel="stylesheet" href="{{ asset('build/app.scss') }}">
<link rel="stylesheet" href="{{ asset('~/bootstrap/css/bootstrap.css') }}">
{% endblock %}
And the error message in my console
127.0.0.1/:7 GET http://127.0.0.1:8000/~/bootstrap/css/bootstrap.css
net::ERR_ABORTED 404 (Not Found)
127.0.0.1/:6 GET http://127.0.0.1:8000/build/app.scss net::ERR_ABORTED 404
(Not Found)
app.js:11 Uncaught Error: Cannot find module ".assetscssapp.scss"
at webpackMissingModule (app.js:11)
at Object../assets/js/app.js (app.js:11)
at __webpack_require__ (bootstrap 63d062e87dc6edab6451:19)
at bootstrap 63d062e87dc6edab6451:62
at bootstrap 63d062e87dc6edab6451:62
Thank you !
The files are only created if you have run encore:
Yarn:
yarn run encore production
yarn run encore dev
yarn run encore dev --watch
Then the files can be found unter "/public/build" and asset can find them.
If you make changes to the source files, you'll have to rerun encore. On dev you can use the "-- watch" command
I'm having errors when I try to build my VueJS project with the style sheets.
My error when I run "yarn run dev --watch" produces these errors:
c:\wamp\www\DBViewer2>yarn run dev --watch
yarn run v1.6.0
warning package.json: No license field
$ encore dev --progress=true --watch
Running webpack ...
0% compiling
Webpack is watching the files…
95% emitting ERROR Failed to compile with 1 errors 16:00:56
This dependency was not found:
* !!vue-style-loader!css-loader?sourceMap!../node_modules/vue-loader/lib/style-compiler/index?{"optionsId":"0","vue":true,"scoped":false,"sourceMap":true}!scss-loader!../node_modules/vue-loader/lib/selector?type=styles&index=0!./App.vue in ./assets/App.vue
To install it, you can run: npm install --save !!vue-style-loader!css-loader?sourceMap!../node_modules/vue-loader/lib/style-compiler/index?{"optionsId":"0","vue":true,"scoped":false,"sourceMap":true}!scss-loader!../node_modules/vue-loader/lib/selector?type=styles&index=0!./A
I'm not sure what is causing this. It appears it is looking for the files in the wrong location?
Here is my App.vue file:
<template>
<router-view></router-view>
</template>
<script>
export default {
name: 'app'
}
</script>
<style lang="scss-loader">
/* Import Font Awesome Icons Set */
$fa-font-path: 'font-awesome/fonts/';
#import 'font-awesome/scss/font-awesome.scss';
/* Import Simple Line Icons Set */
$simple-line-font-path: 'simple-line-icons/fonts/';
#import 'simple-line-icons/scss/simple-line-icons.scss';
/* Import Bootstrap Vue Styles */
#import 'bootstrap-vue/dist/bootstrap-vue.css';
/*// Import Main styles for this application*/
#import './assets/scss/style';
</style>
Here is my webpack.config.js:
var Encore = require('#symfony/webpack-encore');
Encore
// the project directory where all compiled assets will be stored
.setOutputPath('public_html/build/')
// the public path used by the web server to access the previous directory
.setPublicPath('/build')
// will create public/build/app.js and public/build/app.css
.addEntry('main', './assets/main.js')
.addEntry('vendor', './assets/js/vendor.js')
// allow legacy applications to use $/jQuery as a global variable
.autoProvidejQuery()
// enable source maps during development
.enableSourceMaps(!Encore.isProduction())
// empty the outputPath dir before each build
.cleanupOutputBeforeBuild()
// show OS notifications when builds finish/fail
.enableBuildNotifications()
// create hashed filenames (e.g. app.abc123.css)
// .enableVersioning()
.enableVueLoader()
// allow sass/scss files to be processed
.enableSassLoader()
;
// export the final configuration
module.exports = Encore.getWebpackConfig();
Any suggestions is greatly appreciated. Have spent 2 days now trying different things and research on google. I'm just not familiar enough with symfony/encore and this is my first vuejs project.
In order to be able to use SCSS in a Vue template, you need to declare in the single file component the following style block:
<!-- Those styles are not scoped to that particular component -->
<style lang="scss">...</style>
<!-- Or those styles are scoped to that particular component -->
<style lang="scss" scoped>...</style>
You can even use both in the same file, if needed.
You'll also need to install the correct node dependencies by running:
npm install --dev node-sass sass-loader
This should then work out of the box when used in a project initialized with vue-cli.
However you could need to add this in your webpack 'test' configuration to make lang="scss" work in tests when using vue-loader's ?inject option:
resolveLoader: {
alias: {
'scss-loader': 'sass-loader',
},
},
Running ng serve the CSS is placed into <style> tags as expected.
Running ng serve -ec the CSS is kept in it's bundle styles.bundle.css
Running ng serve -ec -sm the CSS is still shown just in the bundle and no sourcemaps seem to be created.
Note: We're using LESS.
Angular CLI: 1.6.2
Node: 6.11.2
OS: darwin x64
Angular: 5.1.2
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router
#angular/cli: 1.6.2
#angular-devkit/build-optimizer: 0.0.36
#angular-devkit/core: 0.0.22
#angular-devkit/schematics: 0.0.42
#ngtools/json-schema: 1.1.0
#ngtools/webpack: 1.9.2
#schematics/angular: 0.1.11
#schematics/schematics: 0.0.11
typescript: 2.4.2
webpack: 3.10.0
This is due to an issue with Angular CLI has been broken on and off since v1.3.2 and currently is still broken as of v1.7.x
Did a little more digging & comparing the webpack config file, found that the new CLI is using Webpack plugin "raw-loader" which does not yet support sourcemap (somehow the ticket has been closed but I am not sure if the sourcemap has been implemented).
Only option is to downgrade to v1.6.6 then apply a patch provided by #CharltonC
In "node_modules#angular\cli\models\webpack-configs\common.js" file, in line 162, Add a line devtool: 'source-map', in the returned common configuration object in the getCommonConfig function, e.g.
...
catch (e) { }
return {
devtool: 'source-map', // add this line
resolve: {
extensions: ['.ts', '.js'],
...
Tested with the following Commands in terminal (also works with Sass #import):
ng serve // no sourcemap
ng serve -sm -ec // has sourcemap
ng serve --sourcemap --extract-css // has sourcemap
ng serve --sourcemap --extractCss // has sourcemap
https://github.com/angular/angular-cli/issues/9099
I am attempting to get Webpack to process and copy all the image files in src folder and output them to the build folder using ‘image-webpack-loader`.
As far as I understand, Webpack will only do this with images referenced in CSS/SASS/LESS or an entry point.
I am working on a Symfony project and have many references in twig templates, which are obviously ignored.
Any idea how I could make this happen without the addition of a build tool or making a duplicate reference file for every image that I include in a project template?
Create a s subdirectory under web root:
Symfony 3:
web/s
Symfony 4 & 5:
public/s
Configure your new subdomain:
Symfony 3: (app/config/config.yml)
framework:
assets:
base_urls:
- '%protocol%://s.%host%'
Symfony 4 & 5: (config/packages/assets.yaml)
framework:
assets:
base_urls:
- '%protocol%://s.%host%'
Note:
%protocol% is either http or https accoring to you environment
%host% is your host, maybe example.com or something.
Configure Webpack (webpack.config.js)
Symfony 3:
var Encore = require('#symfony/webpack-encore');
Encore
// ...
.setOutputPath('./web/s/build/')
.setPublicPath('/build')
.setManifestKeyPrefix('build')
.cleanupOutputBeforeBuild()
// ...
;
module.exports = Encore.getWebpackConfig();
Symfony 4 & 5:
var Encore = require('#symfony/webpack-encore');
Encore
// ...
.setOutputPath('./public/s/build/')
.setPublicPath('/build')
.setManifestKeyPrefix('build')
.cleanupOutputBeforeBuild()
// ...
;
module.exports = Encore.getWebpackConfig();
Put all your images inside /web/s or /public/s according to your Symfony version.
Inside your Twig views, access them like below:
<img src="{{ asset('photo.jpg') }}" alt="Photo"/>
Accept and hit upvote on this cool answer!
In webpack.config.js, you could add .copyFiles() to the Encore object. This will take an object with "from", and "to" keys, with a couple of wildcards.
Here is an example:
.copyFiles({
from: 'src',
to: 'images/[path][name].[ext]'
})