I'm trying to use https://github.com/UniversalViewer/universalviewer V4 project with my Symfony application. I'm using Webpack Encore. I used yarn add universalviewer command to install plugin, next yarn encore dev and all works correct except CSS. CSS are not build.
So next I tried to add to my app.css file line #import "/universalviewer"; but then I have lot of errors when I try to build by yarn encore dev.
Errors like
ERROR Failed to compile with 2 errors
error in ./node_modules/universalviewer/dist/cjs/index.js
Syntax Error: CssSyntaxError
(1:1) /var/www/myproject/node_modules/universalviewer/dist/cjs/index.js Unknown word
How to build it properly?
My webpack.config.js
const Encore = require('#symfony/webpack-encore');
if (!Encore.isRuntimeEnvironmentConfigured()) {
Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}
Encore
.setOutputPath('public/build/')
.setPublicPath('/build')
.addEntry('app', './assets/app.js')
.enableStimulusBridge('./assets/controllers.json')
.splitEntryChunks()
.enableSingleRuntimeChunk()
.cleanupOutputBeforeBuild()
.enableBuildNotifications()
.enableSourceMaps(!Encore.isProduction())
.enableVersioning(Encore.isProduction())
;
module.exports = Encore.getWebpackConfig();
try
#import "~universalviewer/uw";
But I would try adding the main CSS file by adding into app.js (main JS file):
import './styles/global.scss';
then inside global.scss add import CSS which u want:
#import "~universalviewer/uw";
Related
I want to add SASS to my project, I'm using Symfony 4.2.1 / Ubuntu 16.04
Here is the commands I've use:
composer require encore
curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
sudo apt-get update && sudo apt-get install yarn
yarn install
So I have a webpack.config.js file the Documentation say:
// webpack.config.js
// ...
Encore
// ...
// enable just the one you want
// processes files ending in .scss or .sass
.enableSassLoader()
// processes files ending in .less
.enableLessLoader()
// processes files ending in .styl
.enableStylusLoader()
;
There is a Encore object.
In another tutorial I see:
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
}
};
It totally different type file the documentation say (the first code)
And my file look as:
/*
* Welcome to your app's main JavaScript file!
*
* We recommend including the built version of this JavaScript file
* (and its CSS file) in your base layout (base.html.twig).
*/
// any CSS you require will output into a single css file (app.css in this case)
require('../css/app.css');
// Need jQuery? Install it with "yarn add jquery", then uncomment to require it.
// const $ = require('jquery');
console.log('Hello Webpack Encore! Edit me in assets/js/app.js');
It is another different type of file again!
What must I do now ? (I've made nothing after 'yarn install')
Your first webpack.config file has been setup to use Encore, a Symfony component that wraps webpack to provide an easy to use API.
The second webpack.config file is not using Encore, it is a traditional webpack setup.
Since you are using the latest version of Symfony you probably want to use the first, which provides a much easier to understand API.
You can read more about Encore in the symfony docs here:
https://symfony.com/doc/current/frontend/encore/css-preprocessors.html
I'm running on Symfony 4.1 with Webpack Encore, Vue.js app for frontend and SCSS styles. In VUE single file component I declare style that gets compiled however into public/build/js/ folder as app.css together with app/js in same folder. Any idea how can I change destination to public/build/css/app.css where I have all my sccs files compiled together into a single file? This is achieved by import, however I fail to set what I have described above.
Here is part of my webpack.config.js:
.enableSassLoader()
.enableVueLoader()
.addEntry('js/app', './assets/js/app.js')
.addStyleEntry('css/app', './assets/css/main.scss')
The recommended way to achieve what you want is by configuring your webpack.config.js like this:
.enableSassLoader()
.enableVueLoader()
.configureFilenames({
css: 'css/[name].css',
js: 'js/[name].js'
})
.addEntry('app', './assets/js/app.js')
Then in your assets/js/app.js file:
require('../scss/main.scss');
// your code
The above configuration will produce a build/js/app.js file and a build/css/app.css file (all your scss files compiled together into a single file).
I have problem with compiling sass files with custom made font files.
This is how my directory structure looks like:
app.scss file content:
#import '../../../libraries/SymfonyBundle/assets/css/helper';
helper.scss file content:
#import "helpers/grid";
#import "helpers/colors";
#import "helpers/fonts";
fonts.scss file content:
#font-face {
font-family: "custom-font";
src: url("../../fonts/custom-font.eot");
font-weight: normal;
font-style: normal;
}
Custom Bundles files location:
/var/www/libraries/SymfonyBundle/assets/font/custom-font.eot
/var/www/libraries/SymfonyBundle/assets/css/helper.scss
/var/www/libraries/SymfonyBundle/assets/css/helpers/fonts.scss
What url should I provide? I have tried ../../../../libraries/SymfonyBundle/assets/fonts/custom-font.eot (relative to website build directory), ../../fonts/custom-font.eot (relative to library scss file).
But I am still getting this error while running yarn run encore dev command:
This relative module was not found:
* ../../../../libraries/SymfonyBundle/assets/font/custom-font.eot in ./node_modules/css-loader??ref--4-2!./node_modules/sass-loader/lib/loader.js??ref--4-3!./assets/css/app.scss`
webpack.config.js
var Encore = require('#symfony/webpack-encore');
Encore
// the project directory where compiled assets will be stored
.setOutputPath('public/build/')
// the public path used by the web server to access the previous
directory
.setPublicPath('/build')
.cleanupOutputBeforeBuild()
.enableSourceMaps(!Encore.isProduction())
// uncomment to create hashed filenames (e.g. app.abc123.css)
.enableVersioning(Encore.isProduction())
// uncomment to define the assets of the project
.addEntry('js/app', './assets/js/app.js')
.addStyleEntry('css/app', './assets/css/app.scss')
// uncomment if you use Sass/SCSS files
.enableSassLoader(function(sassOptions) {}, {
resolveUrlLoader: false
})
// uncomment for legacy applications that require $/jQuery as a global
variable
.autoProvidejQuery()
;
module.exports = Encore.getWebpackConfig();
Whenever you run Encore, a manifest.json file is automatically created in your outputPath directory. Check your paths in this file. Especially the slashes: and the value of the setOutputPath: ./build/ vs /buld vs build.
Can be tricky if your Symfony lives in a subdir (like http://dev.local/my-symfony-app/) too. See: this paragraph in Symfony official FAQ
I've a problem when I configure for the first time the webpack.config.js in my Symfony 3.4 project.
I folow the documentation of symfony to install and configure encore but I don't know why I've allways this error:
$ yarn run encore dev
yarn run v1.6.0
$ [my_root_project_path]\node_modules\.bin\encore dev
Running webpack ...
ERROR Failed to compile with 1 errors10:01:31
error
Entry module not found: Error: Can't resolve 'web/build/app.js' in '[my_root_project_path]'
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
my webpack.config.js file is this:
// webpack.config.js
var Encore = require('#symfony/webpack-encore');
Encore
.setOutputPath('web/build/')
.setPublicPath('/build')
.addEntry('app', 'web/build/app.js')
.autoProvidejQuery()
.enableSourceMaps(!Encore.isProduction())
.cleanupOutputBeforeBuild()
;
module.exports = Encore.getWebpackConfig();
Does the problem come from a permission on files that Encore doesn't? Anyway, I'm lost, I don't know what to do.
Config:
Windows 10
wamp server
php version 5.6.31
Symfony 3.4
yarn 1.6.0
Note:
I know there is probably another post of the same kind of issue but I think that at the moment I have tested everything and my problem persists. I'm always listening and if you think there's a stackoverflow post that can solve my problem I'll let you share it with me.
Your problem is in addEntry path
.addEntry('app', 'web/build/app.js')
which does not point to the right file. The correct syntax is:
.addEntry(<name_of_the_entry>, <path_to_the_entry>)
where path_to_the_entry must point to a js file you want to add in your build, not directly to your build path. This file should be in a different folder e.g. 'your_project_root/assets/js/your_js_file.js' as specified in doc.
Encore will create the appropriate .js file (and possibly .css if you added one in your .js file) in your web/build folder so that your users can access those files.
I would like to write my styles in stylus in place of sass, but I'm not finding any information to do it.
Here is my actual configuration into webpack.config.js:
var Encore = require('#symfony/webpack-encore');
Encore
.setOutputPath('web/assets/')
.setPublicPath('/assets')
.cleanupOutputBeforeBuild()
.addEntry('app', './assets/js/main.js')
.addStyleEntry('global', './assets/css/global.scss')
.enableSassLoader()
.autoProvidejQuery()
.enableSourceMaps(!Encore.isProduction());
module.exports = Encore.getWebpackConfig();
any hint?
You can use .enableStylusLoader() in Encore but you need to add stylus and stylus-loader with
yarn add stylus stylus-loader --dev
You can add custom loaders
Encore
// ...
.addLoader({
test: /\.styl$/,
loader: 'style-loader!css-loader!stylus-loader'
})
;
Remember to install stylus loader npm install --save-dev stylus-loader.
Notice, the configuration of the loader might have changed based on what Webpack version you are using, but I hope you get the general idea.