![](/img/trans.png)
[英]can't compile witn webpack-encore, the webpack requires version ^8.0.0
[英]Can't compile material-components with webpack-encore
设置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";
知道为什么会发生这种情况,以及如何解决这个问题吗?
我觉得你很亲近。 尝试编辑您的 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
});
在这里解释
对于这种情况,其他人会因此而绊倒。 如果您更改了导入 scss/sass 文件的方式,它也可能会解决您的问题。
@import "~@material/feature-targeting/functions";
@import "~@material/feature-targeting/mixins";
@import "~@material/theme/variables";
@import "./variables";
~
引用了 node_modules。 至少我是这样做的,它无需任何特殊的 sass-loader 配置即可工作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.