через пару дней я начал новый проект с laravel 6, и я очень стараюсь заставить его работать с веб-компонентом материального дизайна , но каждый раз я запускаю команду npm run watch У меня та же ошибка в моем терминале, что я пытался использовать "sass-loader": "^7.1.0",, но он не работал, и ошибка:
ERROR Failed to compile with 2 errors
2:01:59 PM
error in ./resources/sass/app.scss
Module build failed (from ./node_modules/css-loader/dist/cjs.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/lib/loader.js):
@use "material-components-web/material-components-web";
^
Can't find stylesheet to import.
╷
1 │ @use "material-components-web/material-components-web";
stdin 1:1 root stylesheet
in /home/amratef/projects/xoon_app/resources/sass/app.scss (line 1, column 1)
at /home/amratef/projects/xoon_app/node_modules/webpack/lib/NormalModule.js:316:20
at /home/amratef/projects/xoon_app/node_modules/loader-runner/lib/LoaderRunner.js:367:11
at /home/amratef/projects/xoon_app/node_modules/loader-runner/lib/LoaderRunner.js:233:18
at context.callback (/home/amratef/projects/xoon_app/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
at /home/amratef/projects/xoon_app/node_modules/sass-loader/lib/loader.js:52:13
at Function.call$2 (/home/amratef/projects/xoon_app/node_modules/sass/sass.dart.js:88191:16)
at _render_closure1.call$2 (/home/amratef/projects/xoon_app/node_modules/sass/sass.dart.js:77610:12)
at _RootZone.runBinary$3$3 (/home/amratef/projects/xoon_app/node_modules/sass/sass.dart.js:26152:18)
at _RootZone.runBinary$3 (/home/amratef/projects/xoon_app/node_modules/sass/sass.dart.js:26156:19)
at _FutureListener.handleError$1 (/home/amratef/projects/xoon_app/node_modules/sass/sass.dart.js:24600:19)
at _Future__propagateToListeners_handleError.call$0 (/home/amratef/projects/xoon_app/node_modules/sass/sass.dart.js:24897:40)
at Object._Future__propagateToListeners (/home/amratef/projects/xoon_app/node_modules/sass/sass.dart.js:4311:88)
at _Future._completeError$2 (/home/amratef/projects/xoon_app/node_modules/sass/sass.dart.js:24725:9)
at _AsyncAwaitCompleter.completeError$2 (/home/amratef/projects/xoon_app/node_modules/sass/sass.dart.js:24117:12)
at Object._asyncRethrow (/home/amratef/projects/xoon_app/node_modules/sass/sass.dart.js:4065:17)
at /home/amratef/projects/xoon_app/node_modules/sass/sass.dart.js:14087:20
at _wrapJsFunctionForAsync_closure.$protected (/home/amratef/projects/xoon_app/node_modules/sass/sass.dart.js:4090:15)
at _wrapJsFunctionForAsync_closure.call$2 (/home/amratef/projects/xoon_app/node_modules/sass/sass.dart.js:24138:12)
at _awaitOnObject_closure0.call$2 (/home/amratef/projects/xoon_app/node_modules/sass/sass.dart.js:24130:25)
at _RootZone.runBinary$3$3 (/home/amratef/projects/xoon_app/node_modules/sass/sass.dart.js:26152:18)
at _RootZone.runBinary$3 (/home/amratef/projects/xoon_app/node_modules/sass/sass.dart.js:26156:19)
at _FutureListener.handleError$1 (/home/amratef/projects/xoon_app/node_modules/sass/sass.dart.js:24600:19)
at _Future__propagateToListeners_handleError.call$0 (/home/amratef/projects/xoon_app/node_modules/sass/sass.dart.js:24897:40)
at Object._Future__propagateToListeners (/home/amratef/projects/xoon_app/node_modules/sass/sass.dart.js:4311:88)
at _Future._completeError$2 (/home/amratef/projects/xoon_app/node_modules/sass/sass.dart.js:24725:9)
at _AsyncAwaitCompleter.completeError$2 (/home/amratef/projects/xoon_app/node_modules/sass/sass.dart.js:24117:12)
at Object._asyncRethrow (/home/amratef/projects/xoon_app/node_modules/sass/sass.dart.js:4065:17)
at /home/amratef/projects/xoon_app/node_modules/sass/sass.dart.js:16672:20
at _wrapJsFunctionForAsync_closure.$protected (/home/amratef/projects/xoon_app/node_modules/sass/sass.dart.js:4090:15)
at _wrapJsFunctionForAsync_closure.call$2 (/home/amratef/projects/xoon_app/node_modules/sass/sass.dart.js:24138:12)
at _awaitOnObject_closure0.call$2 (/home/amratef/projects/xoon_app/node_modules/sass/sass.dart.js:24130:25)
at _RootZone.runBinary$3$3 (/home/amratef/projects/xoon_app/node_modules/sass/sass.dart.js:26152:18)
at _RootZone.runBinary$3 (/home/amratef/projects/xoon_app/node_modules/sass/sass.dart.js:26156:19)
at _FutureListener.handleError$1 (/home/amratef/projects/xoon_app/node_modules/sass/sass.dart.js:24600:19)
at _Future__propagateToListeners_handleError.call$0 (/home/amratef/projects/xoon_app/node_modules/sass/sass.dart.js:24897:40)
at Object._Future__propagateToListeners (/home/amratef/projects/xoon_app/node_modules/sass/sass.dart.js:4311:88)
error in ./resources/sass/app.scss
Module build failed (from ./node_modules/sass-loader/lib/loader.js):
@use "material-components-web/material-components-web";
^
Can't find stylesheet to import.
╷
1 │ @use "material-components-web/material-components-web";
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
stdin 1:1 root stylesheet
in /home/amratef/projects/xoon_app/resources/sass/app.scss (line 1, column 1)
@ ./resources/sass/app.scss 2:14-201
Asset Size Chunks Chunk Names
/js/app.js 10 MiB /js/app [emitted] /js/app
ERROR in ./resources/sass/app.scss
Module build failed (from ./node_modules/css-loader/dist/cjs.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/lib/loader.js):
@use "material-components-web/material-components-web";
^
Can't find stylesheet to import.
╷
1 │ @use "material-components-web/material-components-web";
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
stdin 1:1 root stylesheet
in /home/amratef/projects/xoon_app/resources/sass/app.scss (line 1, column 1)
at /home/amratef/projects/xoon_app/node_modules/webpack/lib/NormalModule.js:316:20
at /home/amratef/projects/xoon_app/node_modules/loader-runner/lib/LoaderRunner.js:367:11
at /home/amratef/projects/xoon_app/node_modules/loader-runner/lib/LoaderRunner.js:233:18
at context.callback (/home/amratef/projects/xoon_app/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
at /home/amratef/projects/xoon_app/node_modules/sass-loader/lib/loader.js:52:13
at Function.call$2 (/home/amratef/projects/xoon_app/node_modules/sass/sass.dart.js:88191:16)
at _render_closure1.call$2 (/home/amratef/projects/xoon_app/node_modules/sass/sass.dart.js:77610:12)
at _RootZone.runBinary$3$3 (/home/amratef/projects/xoon_app/node_modules/sass/sass.dart.js:26152:18)
at _RootZone.runBinary$3 (/home/amratef/projects/xoon_app/node_modules/sass/sass.dart.js:26156:19)
at _FutureListener.handleError$1 (/home/amratef/projects/xoon_app/node_modules/sass/sass.dart.js:24600:19)
at _Future__propagateToListeners_handleError.call$0 (/home/amratef/projects/xoon_app/node_modules/sass/sass.dart.js:24897:40)
at Object._Future__propagateToListeners (/home/amratef/projects/xoon_app/node_modules/sass/sass.dart.js:4311:88)
at _Future._completeError$2 (/home/amratef/projects/xoon_app/node_modules/sass/sass.dart.js:24725:9)
at _AsyncAwaitCompleter.completeError$2 (/home/amratef/projects/xoon_app/node_modules/sass/sass.dart.js:24117:12)
at Object._asyncRethrow (/home/amratef/projects/xoon_app/node_modules/sass/sass.dart.js:4065:17)
at /home/amratef/projects/xoon_app/node_modules/sass/sass.dart.js:14087:20
at _wrapJsFunctionForAsync_closure.$protected (/home/amratef/projects/xoon_app/node_modules/sass/sass.dart.js:4090:15)
at _wrapJsFunctionForAsync_closure.call$2 (/home/amratef/projects/xoon_app/node_modules/sass/sass.dart.js:24138:12)
at _awaitOnObject_closure0.call$2 (/home/amratef/projects/xoon_app/node_modules/sass/sass.dart.js:24130:25)
at _RootZone.runBinary$3$3 (/home/amratef/projects/xoon_app/node_modules/sass/sass.dart.js:26152:18)
at _RootZone.runBinary$3 (/home/amratef/projects/xoon_app/node_modules/sass/sass.dart.js:26156:19)
at _FutureListener.handleError$1 (/home/amratef/projects/xoon_app/node_modules/sass/sass.dart.js:24600:19)
at _Future__propagateToListeners_handleError.call$0 (/home/amratef/projects/xoon_app/node_modules/sass/sass.dart.js:24897:40)
at Object._Future__propagateToListeners (/home/amratef/projects/xoon_app/node_modules/sass/sass.dart.js:4311:88)
at _Future._completeError$2 (/home/amratef/projects/xoon_app/node_modules/sass/sass.dart.js:24725:9)
at _AsyncAwaitCompleter.completeError$2 (/home/amratef/projects/xoon_app/node_modules/sass/sass.dart.js:24117:12)
at Object._asyncRethrow (/home/amratef/projects/xoon_app/node_modules/sass/sass.dart.js:4065:17)
at /home/amratef/projects/xoon_app/node_modules/sass/sass.dart.js:16672:20
at _wrapJsFunctionForAsync_closure.$protected (/home/amratef/projects/xoon_app/node_modules/sass/sass.dart.js:4090:15)
at _wrapJsFunctionForAsync_closure.call$2 (/home/amratef/projects/xoon_app/node_modules/sass/sass.dart.js:24138:12)
at _awaitOnObject_closure0.call$2 (/home/amratef/projects/xoon_app/node_modules/sass/sass.dart.js:24130:25)
at _RootZone.runBinary$3$3 (/home/amratef/projects/xoon_app/node_modules/sass/sass.dart.js:26152:18)
at _RootZone.runBinary$3 (/home/amratef/projects/xoon_app/node_modules/sass/sass.dart.js:26156:19)
at _FutureListener.handleError$1 (/home/amratef/projects/xoon_app/node_modules/sass/sass.dart.js:24600:19)
at _Future__propagateToListeners_handleError.call$0 (/home/amratef/projects/xoon_app/node_modules/sass/sass.dart.js:24897:40)
at Object._Future__propagateToListeners (/home/amratef/projects/xoon_app/node_modules/sass/sass.dart.js:4311:88)
@ ./resources/sass/app.scss
ERROR in ./resources/sass/app.scss (./node_modules/css-loader/dist/cjs.js??ref--5-2!./node_modules/postcss-loader/src??postcss0!./node_modules/sass-loader/lib/loader.js??ref--5-4!./resources/sass/app.scss)
Module build failed (from ./node_modules/sass-loader/lib/loader.js):
@use "material-components-web/material-components-web";
^
Can't find stylesheet to import.
╷
1 │ @use "material-components-web/material-components-web";
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
stdin 1:1 root stylesheet
in /home/amratef/projects/xoon_app/resources/sass/app.scss (line 1, column 1)
@ ./resources/sass/app.scss 2:14-201
[Browsersync] Proxying: http://localhost:8001
[Browsersync] Access URLs:
------------------------------------
Local: http://localhost:3004
External: http://192.168.1.6:3004
------------------------------------
UI: http://localhost:3005
UI External: http://localhost:3005
------------------------------------
[Browsersync] Watching files...
И это мои зависимости в пакете. json файл
"devDependencies": {
"@babel/core": "^7.11.0",
"@babel/preset-env": "^7.11.0",
"@fortawesome/fontawesome-free": "^5.14.0",
"autoprefixer": "^9.8.6",
"axios": "^0.19",
"babel-loader": "^8.1.0",
"bootstrap": "^4.5.0",
"browser-sync": "^2.26.12",
"browser-sync-webpack-plugin": "^2.2.2",
"cross-env": "^7.0",
"css-loader": "^4.2.0",
"extract-loader": "^5.1.0",
"file-loader": "^6.0.0",
"jquery": "^3.5.1",
"laravel-mix": "^5.0.1",
"lodash": "^4.17.13",
"node-sass": "^4.14.1",
"popper.js": "^1.11.0",
"postcss-loader": "^3.0.0",
"resolve-url-loader": "^3.1.0",
"sass": "^1.26.10",
"sass-loader": "^7.1.0",
"vue-template-compiler": "^2.6.11"
},
"dependencies": {
"@material/auto-init": "^7.0.0",
"@material/button": "^7.0.0",
"@material/icon-button": "^7.0.0",
"@material/mwc-button": "^0.17.2",
"material-components-web": "^7.0.0",
"vue-mdc-adapter": "^0.18.2"
}
и это содержимое приложения. s css файл
@use "material-components-web/material-components-web";
@import '~bootstrap/scss/bootstrap';
@import '~@fortawesome/fontawesome-free/scss/fontawesome';
@import '~@fortawesome/fontawesome-free/scss/regular';
@import '~@fortawesome/fontawesome-free/scss/solid';
@import '~@fortawesome/fontawesome-free/scss/brands';
$test-color:green;
.testing{
color: $test-color;
}
#navbar-example2,
HTML,
body {
scroll-behavior: smooth;
}
и это содержимое приложения. js файл
import $ from 'jquery';
window.$ = window.jQuery = $;
window._ = require('lodash');
window.axios = require("axios");
require('bootstrap');
const autoprefixer = require('autoprefixer');
import autoInit from '@material/auto-init';
autoInit();
import * as mdc from 'material-components-web';
и это содержимое webpack.mix. js файл
const path = require('path');
const mix = require('laravel-mix');
mix.autoload({
jquery: ['$', 'window.jQuery', 'jQuery'],
'popper.js/dist/umd/popper.js': ['Popper']
});
mix.copy('node_modules/@fortawesome/fontawesome-free/webfonts', 'public/webfonts')
.js("resources/js/app.js", "public/js")
.sass( 'resources/sass/app.scss', "public/css",{
implementation: require('sass'),
webpackImporter: false,
sassOptions: {
includePaths: ['./node_modules']
}
})
.options({
processCssUrls: false
});
if (mix.inProduction()) {
mix.version();
}else{
mix.browserSync('http://localhost:8001/')
.sourceMaps();
}
так что, пожалуйста, может ли кто-нибудь помочь мне с этим: (