Не могу скомпилировать материальные компоненты с помощью webpack-encore

yarn encore dev сбой после настройки material-components

Я установил material-components с помощью yarn add material-components-web --dev

а затем настроил app.js следующим образом:

/* --- 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";

При запуске yarn encore dev я получаю следующую ошибку:

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.

Импорт в файлы:

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";

Есть идеи о том, почему это происходит и как это исправить?


symfony webpack-encore symfony4 material-components
person Preciel    schedule 16.05.2019    source источник
comment
Можете ли вы проверить в @ material / elevation / mixins, действительно ли файл называется миксинами, а не _mixins?   -  person Dylan Kas    schedule 20.05.2019
comment
Вы пробовали переименовать миксины в _mixins или изменить @import на _mixins вместо миксинов? Google не использует семантику scss по умолчанию, поэтому временами это довольно раздражает   -  person Dylan Kas    schedule 20.05.2019

Ответы (2)


arrow_upward
3
arrow_downward

Я думаю, вы очень близки. Попробуйте отредактировать конфигурацию вашего бисера, чтобы включить node_modules в загрузчик sass следующим образом:

// 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
});

объяснил здесь

person AnC    schedule 21.05.2019
comment
Действительно, была проблема. CSS теперь компилируется нормально. Спасибо! - person Preciel; 21.05.2019

arrow_upward
-1
arrow_downward

Для случая еще кто-то спотыкается об этом. Возможно, это также решило бы вашу проблему, если бы вы изменили способ импорта файлов scss / sass.

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

~ также ссылается на node_modules. По крайней мере, так я делаю, и он работает без какой-либо специальной конфигурации для sass-loader.

person broadcoder    schedule 08.07.2020
comment
И в следующий раз, когда ты npm install все снова сломается - person Richard; 27.10.2020
comment
У меня ничего не сломалось, когда я запускал npm ci или npm install. Зачем это нужно? - person broadcoder; 06.11.2020