無法使用 webpack-encore 編譯材料組件

Question

設置material-components后yarn encore dev失敗

我使用yarn add material-components-web --dev安裝了material-components

然后像這樣配置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";

知道為什么會發生這種情況，以及如何解決這個問題嗎？

Answer 1

我覺得你很親近。 嘗試編輯您的 encore 配置以將 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
});

在這里解釋

Answer 2

對於這種情況，其他人會因此而絆倒。 如果您更改了導入 scss/sass 文件的方式，它也可能會解決您的問題。

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

~引用了 node_modules。 至少我是這樣做的，它無需任何特殊的 sass-loader 配置即可工作。