If you want to use plain CSS (rather than SCSS), you need to follow these steps: ➊ Create your CSS file. In the assets/styles directory (or another location of your choice), create a CSS file. Let's assume you name it styles.css. ➋ Add the addEntry() method in the webpack.config.js For example: .addEntry('app', './assets/app.js') The webpack.config.js file is the main configuration file for Webpack Encore. It is used to define the entry points for your application, the loaders that will be used to process your assets, and the output configuration. ➌ Import CSS in a JS file. Open the file you specified in Webpack Encore settings as the entry point for JS (for example, app.js). In this file, you will import your CSS file. Add an import statement at the beginning of your JS file. ➍ Make sure you have the import in your template. In your Twig template (for example, base.html.twig), include the compiled CSS using the encore_entry_link_tags function: {{ encore_entry_link_tags('app') }} ➎ Compile the styles. Run in the terminal the command to compile the styles (I prefer this one): npm run watch * It compile assets and automatically re-compile when files change With this approach, the styles you imported in the JS file will be automatically processed, compiled, and linked to your project through bundles, as configured in Webpack Encore. ❗ Using addStyleEntry() to compile only a CSS file is supported, but it is not recommended. A better option is to follow the pattern I mentioned: use addEntry() to point to a JavaScript file, then require the CSS needed from inside of that. The reason why it is not recommended to use addStyleEntry() is that it can lead to performance problems. When you use addStyleEntry(), Webpack will create a separate file for each CSS file that you compile. This can lead to a large number of files, which can slow down the loading of your application. If you only need to compile a single CSS file, then you can use addStyleEntry(). However, if you need to compile multiple CSS files, then it is better to use addEntry() and require the CSS files from inside of the JavaScript file.
Thank you very much 🙏
Hi from Colombia...
how to use normal css without sass.?
If you want to use plain CSS (rather than SCSS), you need to follow these steps:
➊ Create your CSS file.
In the assets/styles directory (or another location of your choice), create a CSS file. Let's assume you name it styles.css.
➋ Add the addEntry() method in the webpack.config.js
For example:
.addEntry('app', './assets/app.js')
The webpack.config.js file is the main configuration file for Webpack Encore. It is used to define the entry points for your application, the loaders that will be used to process your assets, and the output configuration.
➌ Import CSS in a JS file.
Open the file you specified in Webpack Encore settings as the entry point for JS (for example, app.js). In this file, you will import your CSS file. Add an import statement at the beginning of your JS file.
➍ Make sure you have the import in your template.
In your Twig template (for example, base.html.twig), include the compiled CSS using the encore_entry_link_tags function:
{{ encore_entry_link_tags('app') }}
➎ Compile the styles.
Run in the terminal the command to compile the styles (I prefer this one):
npm run watch
* It compile assets and automatically re-compile when files change
With this approach, the styles you imported in the JS file will be automatically processed, compiled, and linked to your project through bundles, as configured in Webpack Encore.
❗ Using addStyleEntry() to compile only a CSS file is supported, but it is not recommended. A better option is to follow the pattern I mentioned: use addEntry() to point to a JavaScript file, then require the CSS needed from inside of that.
The reason why it is not recommended to use addStyleEntry() is that it can lead to performance problems. When you use addStyleEntry(), Webpack will create a separate file for each CSS file that you compile. This can lead to a large number of files, which can slow down the loading of your application.
If you only need to compile a single CSS file, then you can use addStyleEntry(). However, if you need to compile multiple CSS files, then it is better to use addEntry() and require the CSS files from inside of the JavaScript file.
you can use symfony/asset-mapper and symfony/asset its basic and easy to use