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";
I am having a problem using Encore webpack in my Symfony 4 project.
I currently have all my files css / js / scss / images in the public folder.
And in this one I have a sideBar folder that contains folders that contain files themselves:
And it can happen that in some of my files like the "main.css", at a time, I use other files thanks to the function url ():
example :
.sidebar-bg.bg1 .sidebar-wrapper {
background-image: url(../img/bg1.jpg); }
And since this is the first time I really use WebpackEncore, I have difficulties to know what strategy to adopt to be able to gather all this.
Do I have to create an app.js file in which I will import all the files from my sideBar folder one by one?
You have two possibilities, first one you can import as your said all files in one file "app.js" for example. This file is your "entry" in your Webpack Encore config file (https://symfony.com/doc/current/frontend/encore/installation.html)
The second option is that you can add multiple entries in your Webpack Encore config file (best practice is one by page) and in each one import some of your files when needed:
.addEntry('app', './assets/js/app.js')
//.addEntry('page1', './assets/js/page1.js')
//.addEntry('page2', './assets/js/page2.js')
My app.js works fine locally, but I get a 404 not found when running on the live website. The file is compiled in the /web/js folder.
{% block javascripts %}
<script src="{{ asset('js/runtime.js')}}"></script>
<script src="{{ asset('js/app.js')}}"></script>
{% endblock %}
note framework is symfony 2.8
webpack.config.js looks this, not sure if the setPublic path should be as below or somewhere else..
var Encore = require('#symfony/webpack-encore');
Encore
// directory where compiled assets will be stored
.setOutputPath('web/js/')
// public path used by the web server to access the output path
.setPublicPath('/js')
/*
* 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', './app/Resources/assets/js/app.js')
.cleanupOutputBeforeBuild()
.enableSourceMaps(!Encore.isProduction())
.autoProvidejQuery()
module.exports = Encore.getWebpackConfig();
Is runtime.js required and it seems to be needed locally but uncertain of use
Just put your asset files to web folder. asic webpack.config.js should look like this:
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')
.addEntry('app', './assets/js/app.js');
Then to build the assets, run this command:
yarn encore dev
After successfully compiling you can use your complied assets in twig template.
<script src="{{ asset('build/app.js') }}"></script>
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've read the documentation, which says that if I want to use scss I have to run the following command:
ng set defaults.styleExt scss
But when I do that and make that file, I still receive this error in my console:
styles.bundle.js:33Uncaught Error: Module build failed: Error: ENOENT:
no such file or directory, open
'/Users/Egen/Code/angular/src/styles.css'(…)
For Angular 6 check the Official documentation
Note: For #angular/cli versions older than 6.0.0-beta.6 use ng set in place of ng config.
For existing projects
In an existing angular-cli project that was set up with the default css styles you will need to do a few things:
Change the default style extension to scss
Manually change in .angular-cli.json (Angular 5.x and older) or angular.json (Angular 6+) or run:
ng config defaults.styleExt=scss
if you get an error: Value cannot be found. use the command:
ng config schematics.#schematics/angular:component.styleext scss
(*source: Angular CLI SASS options)
Rename your existing .css files to .scss (i.e. styles.css and app/app.component.css)
Point the CLI to find styles.scss
Manually change the file extensions in apps[0].styles in angular.json
Point the components to find your new style files
Change the styleUrls in your components to match your new file names
For future projects
As #Serginho mentioned you can set the style extension when running the ng new command
ng new your-project-name --style=scss
If you want to set the default for all projects you create in the future run the following command:
ng config --global defaults.styleExt=scss
As of ng6 this can be accomplished with the following code added to angular.json at the root level:
Manually change in .angular.json:
"schematics": {
"#schematics/angular:component": {
"styleext": "scss"
}
}
Open angular.json file
1.change from
"schematics": {}
to
"schematics": {
"#schematics/angular:component": {
"styleext": "scss"
}
}
change from (at two places)
"src/styles.css"
to
"src/styles.scss"
then check and rename all .css files and update component.ts files styleUrls from .css to .scss
In latest version of Angular (v9), below code needs to add in angular.json
"schematics": {
"#schematics/angular:component": {
"style": "scss"
}
}
Could be added using the following command:
ng config schematics.#schematics/angular:component.style scss
For existing projects:
In angular.json file
In build part and in test part, replace:
"styles": ["src/styles.css"], by "styles": ["src/styles.scss"],
Replace:
"schematics": {}, by "schematics": { "#schematics/angular:component": { "style": "scss" } },
Using ng config schematics.#schematics/angular:component.styleext
scss command works but it does not place the configuration in the
same place.
In your project rename your .css files to .scss
For a new project, this command do all the work:
ng n project-name --style=scss
For global configuration
New versions seems to not have a global command
First install in your project:
npm i --save-dev schematics-scss-migrate
In your Angular CLI project:
run below command:
ng g schematics-scss-migrate:scss-migrate
Above command will do the following in the consuming project:
Rename all the stylesheets in the src folder recursively.
Alter the styleUrls in respective component classes to point to the new file names for stylesheets.
Updates the component styles schematics value in the angular.json file or creates one if the schematic does not exist, and
Renames all styles.css references to styles.scss in the angular.json file.
I have tried this on my angular 9 project and it worked...no need for extra efforts for renaming files...😎 just enter the command and BOOM!!! now your project is migrated to scss project.
refer:
https://www.npmjs.com/package/schematics-scss-migrate
For Angular 6,
ng config schematics.#schematics/angular:component.styleext scss
note: #schematics/angular is the default schematic for the Angular CLI
CSS Preprocessor integration for Angular CLI: 6.0.3
When generating a new project you can also define which extension you want for style files:
ng new sassy-project --style=sass
Or set the default style on an existing project:
ng config schematics.#schematics/angular:component.styleext scss
Angular CLI Documentation for all major CSS preprocessors
Use command:
ng config schematics.#schematics/angular:component.styleext scss
There's obviously more than one ways to do this, but with the recent versions of angular I got another schematics value which I wanted to preserve. Because of this other value the command ng config schematics.#schematics/angular:component.styleext scss failed for me, so I took the new value and entered it myself in angular.json. This is the new value you have to enter:
"#schematics/angular:component": {
"style": "scss"
}
And angular.json looks like this at the end:
{
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
...
"projects": {
"yourapp": {
...
"schematics": {
"#schematics/angular:application": {
"strict": true
},
"#schematics/angular:component": {
"style": "scss"
}
...
Then you'll have to
rename all the css files to scss and
change all the references in your files to those.
You should be done with those steps.
manually change the below code in "angular.json" which will be at the end of the file.
"schematics": {
"#schematics/angular:component": {
"style": "scss"
}
}
Kindly rename the files from .css to .scss and change all the references to the same
A quick and easy way to perform the migration is to use the schematic NPM package schematics-scss-migrate.
this package renames all css files to scss files :
ng add schematics-scss-migrate
https://github.com/Teebo/scss-migrate#readme
A brute force change can be applied.
This will work to change, but it's a longer process.
Go to the app folder src/app
Open this file: app.component.ts
Change this code styleUrls: ['./app.component.css'] to styleUrls: ['./app.component.scss']
Save and close.
In the same folder src/app
Rename the extension for the app.component.css file to (app.component.scss)
Follow this change for all the other components. (ex. home, about, contact, etc...)
The angular.json configuration file is next. It's located at the project root.
Search and Replace the css change it to (scss).
Save and close.
Lastly, Restart your ng serve -o.
If the compiler complains at you, go over the steps again.
Make sure to follow the steps in app/src closely.
In ng6 you need to use this command, according to a similar post:
ng config schematics.#schematics/angular:component '{ styleext: "scss"}'
For users of the Nrwl extensions who come across this thread: all commands are intercepted by Nx (e.g., ng generate component myCompent) and then passed down to the AngularCLI.
The command to get SCSS working in an Nx workspace:
ng config schematics.#nrwl/schematics:component.styleext scss
For Angular 11+
Manually change in angular.json.
Replace the "schematics": {},
with
"schematics": {
"#schematics/angular:component": {
"style": "scss"
}
},
for angular version 12
Just rename styles.css file to styles.scss and update angular.json src/styles.css to src/styles.scss