无法使用 webpack-encore 编译 material-components

Question

yarn encore dev 设置 material-components

后失败

我使用 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
});

已解释here

Answer 2

对于这种情况，其他人被这个绊倒了。如果您更改了导入 scss/sass 文件的方式，它也可能会解决您的问题。

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

~ 也引用了 node_modules。至少我是这样做的，它在没有对 sass-loader.

进行任何特殊配置的情况下工作

无法使用 webpack-encore 编译 material-components

Can't compile material-components with webpack-encore

symfony

material-components

webpack-encore

symfony4