CODEWITHSUNDEEP
symfonysymfony4material-componentswebpack-encore
Preciel
Preciel

Reputation: 2837

Can't compile material-components with webpack-encore

yarn encore dev fail after setting up material-components

I installed material-components using yarn add material-components-web --dev

and then configured app.js like this :

/* --- CSS --- */
import "../css/normalize.scss";
import "material-components-web/material-components-web.scss"
import "../css/layout.scss";
import "../css/style.scss";

/* --- RESOURCES ---*/
import $ from "jquery";
import * as mdc from "material-components-web";

When running yarn encore dev, I get the following error :

ERROR  Failed to compile with 1 errors                                                                                                                                                                                                                          22:30:40

 error  in ./node_modules/material-components-web/material-components-web.scss

Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/lib/loader.js):

@import "@material/elevation/mixins";
^
      File to import not found or unreadable: @material/elevation/mixins.
      in /var/www/vhosts/salon-virtuel/node_modules/@material/button/_mixins.scss (line 23, column 1)
    at runLoaders (/var/www/vhosts/salon-virtuel/node_modules/webpack/lib/NormalModule.js:301:20)
    at /var/www/vhosts/salon-virtuel/node_modules/loader-runner/lib/LoaderRunner.js:367:11
    at /var/www/vhosts/salon-virtuel/node_modules/loader-runner/lib/LoaderRunner.js:233:18
    at context.callback (/var/www/vhosts/salon-virtuel/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at Object.render [as callback] (/var/www/vhosts/salon-virtuel/node_modules/sass-loader/lib/loader.js:52:13)
    at Object.done [as callback] (/var/www/vhosts/salon-virtuel/node_modules/neo-async/async.js:8077:18)
    at options.error (/var/www/vhosts/salon-virtuel/node_modules/node-sass/lib/index.js:294:32)

 @ ./assets/js/app.js 7:0-62

Entrypoint app [big] = runtime.js vendors~app.js app.css app.js
error Command failed with exit code 2.

Imports in files :

node_modules/material-components-web/material-components-web.scss

@import "@material/elevation/mdc-elevation";

node_modules/@material/elevation/mdc-elevation.scss

@import "./mixins";
@include mdc-elevation-core-styles;

node_modules/@material/elevation/_mixins.scss

@import "@material/feature-targeting/functions";
@import "@material/feature-targeting/mixins";
@import "@material/theme/variables";
@import "./variables";

Any idea about why it's happening, and how to fix this?

Upvotes: 1

Views: 1884

Answers (2)

broadcoder
broadcoder

Reputation: 105

For the case, someone else stumbles over this. It may would have also solved your issue, if you changed the way how you import the scss/sass files.

@import "~@material/feature-targeting/functions";
@import "~@material/feature-targeting/mixins";
@import "~@material/theme/variables";
@import "./variables";

The ~ references the node_modules as well. That is at least how I do it and it works without any special config for the sass-loader.

Upvotes: -1

AnC
AnC

Reputation: 651

I think you are very close. Try to edit your encore config to include node_modules to sass loader like this:

// enables Sass/SCSS support
.enableSassLoader(function(options) {
    // https://github.com/sass/node-sass#options
    options.includePaths = ['./node_modules'];
}, {
    // set optional Encore-specific options
    // resolve_url_loader: true
});

explained here

Upvotes: 3

Related Questions