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).
Related
I'm developing with vue.js and vue cli 3. Currently I handle my CSS styles with SASS and compile them with Koala-app. At the moment I am still using it because it is very easy to configure the main.scss and their respective files, and then compile it with autoprefix, in compressed format and with source map to another folder with the name styles.css, I keep the following structure:
I need to replace koala with NPM SASS Loader, how do I replicate this same configuration with VUE CLI 3? The information for the webpack should be added in vue.config.js? Or where? and what would be the parameters to achieve the same effect?
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')
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 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 am learning to use sass for my angular2 components like this:
#Component({
...
styleUrls: ['./app.home.scss', './app.mixins.scss'],
...
})
This works perfectly fine and I am able to render the changes in the web page that is run using ng serve.
However when I build the project using ng build I expect all scss files to compile and build into a single css file that can be included in index.html. Currently none of the scss files are compiling with build. So how do I ensure that my scss files are compiled with build in a single css file? Is there something that can be specified in angular-cli.json that will enable this?