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')
Related
I am using create-react-app for a new project. I have installed node-sass and everything is working. I have one variables.scss file in a styles folder that is at the root of the src folder. I want to be able to use the variables in this file across all the component style files of the app.
I don't like the approach of importing the variables.scss file to each component's scss file. I want to be able reference the variables anywhere in the app and get the values. But so far, I have not been able to find a good resource that shows how to do this without ejecting create-react-app.
- src/
- styles/
- variables.scss
- App.js
- App.scss
- features/
- home/
- home.scss
- Home.js
- index.js
- index.scss
For instance, if I need to use a variable in the home.scss file, I should not be importing the variables.scss file. Instead, I could just reference the name of the variable.
Please let me know what is possible.
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).
Q. How do I / is it possible to split my /SCSS directory into multiple output .css files?
I have a part of the application /admin that I don't want to serve to the standard user for performances reasons. Also, there are some standalone landing pages that are not part of the 'main' site, so could do with their own bundle.
Example SCSS structure:
/scss
- partials
- modules
Compile into:
main.css
admin.css
landing.css
Note: I'm using webpack
I managed configure Webpack to output CSS and JS into respective sub-directories, i.e. public/assets/css and public/assets/js. However, I don't know how to do the same with Symfony Webpack Encore.
The directory where assets are generated is defined in the webpack.config.js file with .setPublicPath('/build').
I am not sure but since webpack is supposed to help you "not to care about generated assets" what is your need to split js/css files in sub folder ?
I've got a Meteor project with the following file structure:
.meteor
client
dashboard
dashboard.scss
client.scss
My basic sass file is client.scss that resides in client folder.
If I define $flat-button in client.scss. Then I cannot use it in dashboard.css without adding import '../client';. However when I do this in multiple files this causes duplicate entries in the unified css file. If I don't import it then Meteor reports errors due to not finding the variable.
Should I add settings to the sass compiler to get this working?
If you're using the fourseven:scss package to compile the Sass in your Meteor project, you simply need to prefix the filenames of your imported .scss files with an underscore, which is the standard method of naming a partial stylesheet with Sass.
In your case, your folder and file structure should be changed to:
.meteor
client
dashboard
_dashboard.scss
client.scss
And then you should be able to use an #import statement to include _dashboard.scss in client.scss like so:
#import 'dashboard'
If for some reason you don't want to rename your files that way, you can also use the .scssimport extension for the same result.
Hope that helps!