Question

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

关于它为什么发生以及如何解决这个问题的任何想法吗？

Answer 1

我认为您非常亲密。尝试编辑您的Encore配置，使其包含node_modules到sass loader中，如下所示：

// 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编译材料组件

2 个答案: