This is a Webpack project with SASS and Twig plugins.

Auto-open browser on index.html after bash command.

Auto-reload of browser after saving changes.

Compile files in "build" folder after bash command: if folder already exists and contains files, they will be deleted and new files will be write.

The output is set to extract the CSS file from js file.

Install:

npm install

Development:

npm run start

Building:

npm run build

In "src/scss" there will be sass files.

Add 1 or more scss files, GENERATE 1 CSS (merged):

1. create the file in scss folder
2. in index.js import the SASS file OR use the SASS's import script!
3. the final output will be a UNIQUE file CSS !

//  ------- IMPORT SASS FILES --------
import './scss/main.scss';
import './scss/variables.scss';

Add 1 or more scss files, GENERATE DISTINCT CSS files:

1. create the file in scss folder
2. in the file "webpack.common.js" add the name and the route of the new file.
3. the final output will be:
   • app.css ( the default one )
   • css.css ( the added one)

NOTE: first parameter (es. 'css') will be the new name of the css file after building.

module.exports = {
    entry: {
        'app': './src/index.js',
        'css': './src/scss/variables.scss' // <-- new file here
    }

Twig files are in src folder, to add new files to the output:

In the file "webpack.prod.js", in "plugins", add the code:

    new HtmlWebpackPlugin({
        template:  './src/index.html.twig'
    })

1. In "webpack.prod.js", under "plugins" , add the code:

    new HtmlWebpackPlugin({
        filename: 'help.html',  
        template:  './src/help.html.twig',
        helper: require('./src/help.js'),   // file con opzioni aggiuntive da passare alla pagina
        inject: false
    })

• filename : name of exported file
• template : url of the file to add
• inject : the file will be without "head" and scripts
• helper : helper is a custom option (can create as many options as needed), is possible to pass variables, objects (ecc..) to the file

2. In "help.js" add the code below to set variables:

   let helper = {
       hello : "world!"
   };
   
   module.exports = helper;

3. In "help.html.twig" add the code below to import variables:

   {{ htmlWebpackPlugin.options.helper.hello }}

• helper : name of the custom option set in "webpack.prod.js"
• hello : name of the variable in "help.js"