Build with webpack (encore)?

[bbuehrle]

I just purchased this template yesterday. Very nice, clean looking templates. I couldn't decide between Material Kit Pro and Now UI Pro!

I started off with a completely fresh Symfony 4 project and I'm trying to use webpack to compile the SCSS files.

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')

    .createSharedEntry('bootstrap', [
        'jquery',
        'popper.js',
        'bootstrap',
        'bootstrap/scss/bootstrap.scss',
        'bootstrap/scss/bootstrap-grid.scss',
        'bootstrap/scss/bootstrap-reboot.scss',
        './assets/material/scss/material-kit-pro.scss'
    ])

    // uncomment if you use Sass/SCSS files
    .enableSassLoader(function () {
        false
    })

    // uncomment for legacy applications that require $/jQuery as a global variable
    .autoProvidejQuery()
;

Error from running webpack build

 error  in ./assets/material/scss/material-kit-pro.scss

Module build failed: ModuleParseError: Module parse failed: Unexpected character ' ' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
    at doBuild (C:\Users\bbueh\PhpStormProjects\<snip>\node_modules\webpack\lib\NormalModule.js:303:19)
    at runLoaders (C:\Users\bbueh\PhpStormProjects\<snip>\node_modules\webpack\lib\NormalModule.js:209:11)
    at C:\Users\bbueh\PhpStormProjects\<snip>\node_modules\loader-runner\lib\LoaderRunner.js:370:3
    at iterateNormalLoaders (C:\Users\bbueh\PhpStormProjects\<snip>\node_modules\loader-runner\lib\LoaderRunner.js:211:10)
    at C:\Users\bbueh\PhpStormProjects\<snip>\node_modules\loader-runner\lib\LoaderRunner.js:202:4
    at C:\Users\bbueh\PhpStormProjects\<snip>\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:70:14
    at _combinedTickCallback (internal/process/next_tick.js:131:7)
    at process._tickCallback (internal/process/next_tick.js:180:9)

 error  in ./assets/material/img/arrow-left.cur

Module parse failed: Unexpected character ' ' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)

 @ ./node_modules/css-loader??ref--4-2!./node_modules/resolve-url-loader??ref--4-3!./node_modules/sass-loader/lib/loader.js??ref--4-4!./assets/material/scss/material-kit-pro.scss 6:231671-231705
 @ ./assets/material/scss/material-kit-pro.scss
 @ multi jquery popper.js bootstrap bootstrap/scss/bootstrap.scss bootstrap/scss/bootstrap-grid.scss bootstrap/scss/bootstrap-reboot.scss ./assets/material/scss/material-kit-pro.scss

 error  in ./assets/material/img/arrow-right.cur

Module parse failed: Unexpected character ' ' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)

 @ ./node_modules/css-loader??ref--4-2!./node_modules/resolve-url-loader??ref--4-3!./node_modules/sass-loader/lib/loader.js??ref--4-4!./assets/material/scss/material-kit-pro.scss 6:231851-231886
 @ ./assets/material/scss/material-kit-pro.scss
 @ multi jquery popper.js bootstrap bootstrap/scss/bootstrap.scss bootstrap/scss/bootstrap-grid.scss bootstrap/scss/bootstrap-reboot.scss ./assets/material/scss/material-kit-pro.scss

npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! @ dev: `encore dev`
npm ERR! Exit status 2
npm ERR! 
npm ERR! Failed at the @ dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\bbueh\AppData\Roaming\npm-cache\_logs\2018-02-10T19_47_48_998Z-debug.log

I'm still fairly new at this so I could just be missing something. I couldn't find anything in the docs for builds using webpack.

[bbuehrle]

I think I've narrowed down the problem spot, but this is my first time working with a project that uses scss files so I'm not sure how to fix it.

_carousel.scss

    &.carousel-full-nagivation{
        .carousel-control{
            width: 50%;

            &.left,
            &.right{
                background-image: none;
            }

            .material-icons,
            .fa{
                display: none;
            }
        }
        .left{
            cursor: url("../img/arrow-left.png"), url("../img/arrow-left.cur"), default !important;
        }
        .right{
            cursor: url("../img/arrow-right.png"), url("../img/arrow-right.cur"), default !important;
        }
    }

Webpack bombs out on the url(...) lines as it cannot find the relative path of the files because it running from another folder. I'm still new so I'm not sure which folder it's running from. I tried playing with the file paths manually and couldn't figure it out. If I comment out @import "core/carousel"; in material-kit-pro.scss then the process builds fine in webpack. For the project I'm working on, I doubt I'll have a need for carousel but would like to know how to fix it in the off chance I do.

I understand that sass uses a lot of variables, so is there any way that these (and whatever other images) can be referenced by a variable instead of the hard-coded path?

[bbuehrle]

@dragosct10 sorry to name-drop. I'm not sure where to go from here. I can manually comment out the carousel.scss as long as I'm not using it or even manually change the url(...) to point at the right file, but this will only work until the next update (2.0.2 came out within days of my purchase). I really don't want to have to make all of these changes each time there's an update. Thanks!

[dragosct]

Hi, @bbuehrle! We are sorry for so late response. Please, can you go to your archive in assets/scss/core/_carousel.scss and change the path of the images that produced you that errors with this path:

  &.carousel-full-nagivation{
        .carousel-control{
            width: 50%;

            &.left,
            &.right{
                background-image: none;
            }

            .material-icons,
            .fa{
                display: none;
            }
        }
        .left{
            cursor: url("../../img/kit/pro/arrow-left.png"), url("../../img/kit/pro/arrow-left.cur"), default !important;
        }
        .right{
            cursor: url("../../img/kit/pro/img/arrow-right.png"), url("../../img/kit/pro/arrow-right.cur"), default !important;
        }
    }

After that please compile the scss and try to do again the webpack build. Please, let us know if you still receive errors!

Regards, Dragos

[bbuehrle]

Hey, @dragosct10! Sorry, but I just now saw this. Somehow, I never got the email that you had responded. I'm at work but will try this out as soon as I get a chance (hopefully tonight?) and I'll let you know what happens.

Thanks, Brian B

[djallits]

@dragosct10 I can replicate this problem with Laravel to, and you are correct in that the relative path needs to be updated as specified. Hope that is enough for you to be able to close this issue.

[dragosct]

Hi, @djallits! Thank you for this. We will fix also in the next update which will be very soon all this problem because it's annoying. Regards, Dragos

[Camiloruiiz]

Hi @dragosct10 , thank you for you reply, I think this path does not exist ""../../img/kit/pro/img/arrow-right.png""

[dragosct]

Hi, @Camiloruiiz! Yes, my bad sorry in 2.0.3 the path was changed so please see the correct path ../../img/arrow-right.png. Let us know if everything is working fine now.

Regards, Dragos

[Camiloruiiz]

Thank you @dragosct10, but I think this path: '../../' its still not the correct one, would be like '../' it'sn't? Im just running webpack and the error jut come form the console. but anyway thank you very much.

[bbuehrle]

@Camiloruiiz you are correct. I don't have access to the project right this moment, but I know the path is definitely still not right. Also, I'm not a guru when it comes to webpack (I've taken a major break from my project), but webpack is still going to bomb out on you when you try to run it. The second problem here is the .cur files. I'm not sure if webpack needs an extra plugin to be able to pull these files, but my quickest workaround was to completely remove the references to the .cur files from the assets/scss/core/_carousel.scss file. If you are familiar with webpack, please post your solution if you get it working. I could use all the help I can get!

[dragosct]

Hi, @Camiloruiiz! I can't understand why you have an error from the console because this is the right path and I will show you in the next image:

Like you noticed here you must go out once from the core/ folder and from the second folder scss/, so you have total of 2 ../../. After that when the path is inside the assets/ folder you have:

Regards, Dragos

[bbuehrle]

@dragosct10 This is the path in _carousel.scss:

.left{
          cursor: url("../../img/kit/pro/arrow-left.png"), url("../../img/kit/pro/arrow-left.cur"), default !important;
      }
      .right{
          cursor: url("../../img/kit/pro/img/arrow-right.png"), url("../../img/kit/pro/arrow-right.cur"), default !important;
      }

This is the corrected path:

.left{
          cursor: url("../../img/arrow-left.png"), url("../../img/arrow-left.cur"), default !important;
      }
      .right{
          cursor: url("../../img/arrow-right.png"), url("../../img/arrow-right.cur"), default !important;
      }

Also, as I mention previously, I think the path to the image and cursor files should be moved to _variables.scss to allow the path to be more easily over-written for those of us with a custom folder structure. This allows us to set our own path and file if we want to use something else and our changes won't be reverted any time we update to a new version of the kit.

[dragosct]

Hi, @bbuehrle! Yes, this is the correct path, you are right. Thank you for your suggestion we will consider this for the next update. Regards, Dragos

[Camiloruiiz]

@bbuehrle yes you should add cur in the url loader.

      {
        test: /\.(png|jpe?g|gif|ico|cur)$/,
        loader: 'url-loader',
        options: {
          // Inline files smaller than 10 kB (10240 bytes)
          limit: 10 * 1024,
          name: './images/[name].[ext]', // Output below
          publicPath: './' // Take the directory into account
        }
      },

And yes @dragosct10 👍🏻 that path it's right for development, but if you check the final css the path would be just one step up '../' because the img folder its no any more under scss folder.