Error while compiling the multiple imported stylesheet

I've included multiple stylesheets into my app.scss but the laravel mix is giving me a long error which I don't understand. all was working fine when there was only the first import (the bootstrap) but after i added the other stylesheets all broke down.

app.scss

@import '~bootstrap/scss/bootstrap',
    '/resources/scss/argon-design-system.scss',
    '/resources/css/argon-design-system.css',
    '/resources/css/argon-design-system.css.map',
    '/resources/css/argon-design-system.min.css',
    '/resources/css/custom-profile-edit.css',
    '/resources/css/custom-user-profile.css',
    '/resources/css/fa-fonts.css',
    '/resources/css/font-awesome.css',
    '/resources/css/nucleo-icons.css',
    '/resources/css/nucleo-svg.css';

webpack.mix.js

const mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel applications. By default, we are compiling the CSS
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/scss/app.scss', 'public/css');

npm run dev error

> @ dev C:\laragon\www\codersCast
> npm run development


> @ development C:\laragon\www\codersCast
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js

98% after emitting SizeLimitsPlugin

 ERROR  Failed to compile with 2 errors                                                                       2:22:03 AM

 error  in ./resources/scss/app.scss

Module build failed (from ./node_modules/css-loader/index.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
   ╷
18 │ @import "bootstrap/functions";
   │         ^^^^^^^^^^^^^^^^^^^^^
   ╵
  resources\scss\argon-design-system.scss 18:9  @import
  resources\scss\app.scss 2:5                   root stylesheet
    at C:\laragon\www\codersCast\node_modules\webpack\lib\NormalModule.js:316:20
    at C:\laragon\www\codersCast\node_modules\loader-runner\lib\LoaderRunner.js:367:11
    at C:\laragon\www\codersCast\node_modules\loader-runner\lib\LoaderRunner.js:233:18
    at context.callback (C:\laragon\www\codersCast\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
    at C:\laragon\www\codersCast\node_modules\sass-loader\dist\index.js:56:7
    at Function.call (C:\laragon\www\codersCast\node_modules\sass\sass.dart.js:89862:16)
    at _render_closure1.call (C:\laragon\www\codersCast\node_modules\sass\sass.dart.js:79036:12)
    at _RootZone.runBinary (C:\laragon\www\codersCast\node_modules\sass\sass.dart.js:26612:18)
    at _FutureListener.handleError (C:\laragon\www\codersCast\node_modules\sass\sass.dart.js:25140:19)
    at _Future__propagateToListeners_handleError.callLARACASTS_SNIPPET_PLACEHOLDER (C:\laragon\www\codersCast\node_modules\sass\sass.dart.js:25437:49)
    at Object._Future__propagateToListeners (C:\laragon\www\codersCast\node_modules\sass\sass.dart.js:4502:77)
    at _Future._completeError (C:\laragon\www\codersCast\node_modules\sass\sass.dart.js:25270:9)
    at _AsyncAwaitCompleter.completeError (C:\laragon\www\codersCast\node_modules\sass\sass.dart.js:24613:12)
    at Object._asyncRethrow (C:\laragon\www\codersCast\node_modules\sass\sass.dart.js:4251:17)
    at C:\laragon\www\codersCast\node_modules\sass\sass.dart.js:13112:20
    at _wrapJsFunctionForAsync_closure.$protected (C:\laragon\www\codersCast\node_modules\sass\sass.dart.js:4276:15)
    at _wrapJsFunctionForAsync_closure.call (C:\laragon\www\codersCast\node_modules\sass\sass.dart.js:24634:12)
    at _awaitOnObject_closure0.call (C:\laragon\www\codersCast\node_modules\sass\sass.dart.js:24626:25)
    at _RootZone.runBinary (C:\laragon\www\codersCast\node_modules\sass\sass.dart.js:26612:18)
    at _FutureListener.handleError (C:\laragon\www\codersCast\node_modules\sass\sass.dart.js:25140:19)
    at _Future__propagateToListeners_handleError.callLARACASTS_SNIPPET_PLACEHOLDER (C:\laragon\www\codersCast\node_modules\sass\sass.dart.js:25437:49)
    at Object._Future__propagateToListeners (C:\laragon\www\codersCast\node_modules\sass\sass.dart.js:4502:77)
    at _Future._completeError (C:\laragon\www\codersCast\node_modules\sass\sass.dart.js:25270:9)
    at _AsyncAwaitCompleter.completeError (C:\laragon\www\codersCast\node_modules\sass\sass.dart.js:24613:12)
    at Object._asyncRethrow (C:\laragon\www\codersCast\node_modules\sass\sass.dart.js:4251:17)
    at C:\laragon\www\codersCast\node_modules\sass\sass.dart.js:15754:20
    at _wrapJsFunctionForAsync_closure.$protected (C:\laragon\www\codersCast\node_modules\sass\sass.dart.js:4276:15)
    at _wrapJsFunctionForAsync_closure.call (C:\laragon\www\codersCast\node_modules\sass\sass.dart.js:24634:12)
    at _awaitOnObject_closure0.call (C:\laragon\www\codersCast\node_modules\sass\sass.dart.js:24626:25)
    at _RootZone.runBinary (C:\laragon\www\codersCast\node_modules\sass\sass.dart.js:26612:18)
    at _FutureListener.handleError (C:\laragon\www\codersCast\node_modules\sass\sass.dart.js:25140:19)
    at _Future__propagateToListeners_handleError.callLARACASTS_SNIPPET_PLACEHOLDER (C:\laragon\www\codersCast\node_modules\sass\sass.dart.js:25437:49)
    at Object._Future__propagateToListeners (C:\laragon\www\codersCast\node_modules\sass\sass.dart.js:4502:77)
    at _Future._completeError (C:\laragon\www\codersCast\node_modules\sass\sass.dart.js:25270:9)
    at _AsyncAwaitCompleter.completeError (C:\laragon\www\codersCast\node_modules\sass\sass.dart.js:24613:12)
    at Object._asyncRethrow (C:\laragon\www\codersCast\node_modules\sass\sass.dart.js:4251:17)

 error  in ./resources/scss/app.scss

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
   ╷
18 │ @import "bootstrap/functions";
   │         ^^^^^^^^^^^^^^^^^^^^^
   ╵
  resources\scss\argon-design-system.scss 18:9  @import
  resources\scss\app.scss 2:5                   root stylesheet

 @ ./resources/scss/app.scss 2:14-253

     Asset     Size   Chunks             Chunk Names
/js/app.js  967 KiB  /js/app  [emitted]  /js/app

ERROR in ./resources/scss/app.scss
Module build failed (from ./node_modules/css-loader/index.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
   ╷
18 │ @import "bootstrap/functions";
   │         ^^^^^^^^^^^^^^^^^^^^^
   ╵
  resources\scss\argon-design-system.scss 18:9  @import
  resources\scss\app.scss 2:5                   root stylesheet
    at C:\laragon\www\codersCast\node_modules\webpack\lib\NormalModule.js:316:20
    at C:\laragon\www\codersCast\node_modules\loader-runner\lib\LoaderRunner.js:367:11
    at C:\laragon\www\codersCast\node_modules\loader-runner\lib\LoaderRunner.js:233:18
    at context.callback (C:\laragon\www\codersCast\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
    at C:\laragon\www\codersCast\node_modules\sass-loader\dist\index.js:56:7
    at Function.call (C:\laragon\www\codersCast\node_modules\sass\sass.dart.js:89862:16)
    at _render_closure1.call (C:\laragon\www\codersCast\node_modules\sass\sass.dart.js:79036:12)
    at _RootZone.runBinary (C:\laragon\www\codersCast\node_modules\sass\sass.dart.js:26612:18)
    at _FutureListener.handleError (C:\laragon\www\codersCast\node_modules\sass\sass.dart.js:25140:19)
    at _Future__propagateToListeners_handleError.callLARACASTS_SNIPPET_PLACEHOLDER (C:\laragon\www\codersCast\node_modules\sass\sass.dart.js:25437:49)
    at Object._Future__propagateToListeners (C:\laragon\www\codersCast\node_modules\sass\sass.dart.js:4502:77)
    at _Future._completeError (C:\laragon\www\codersCast\node_modules\sass\sass.dart.js:25270:9)
    at _AsyncAwaitCompleter.completeError (C:\laragon\www\codersCast\node_modules\sass\sass.dart.js:24613:12)
    at Object._asyncRethrow (C:\laragon\www\codersCast\node_modules\sass\sass.dart.js:4251:17)
    at C:\laragon\www\codersCast\node_modules\sass\sass.dart.js:13112:20
    at _wrapJsFunctionForAsync_closure.$protected (C:\laragon\www\codersCast\node_modules\sass\sass.dart.js:4276:15)
    at _wrapJsFunctionForAsync_closure.call (C:\laragon\www\codersCast\node_modules\sass\sass.dart.js:24634:12)
    at _awaitOnObject_closure0.call (C:\laragon\www\codersCast\node_modules\sass\sass.dart.js:24626:25)
    at _RootZone.runBinary (C:\laragon\www\codersCast\node_modules\sass\sass.dart.js:26612:18)
    at _FutureListener.handleError (C:\laragon\www\codersCast\node_modules\sass\sass.dart.js:25140:19)
    at _Future__propagateToListeners_handleError.callLARACASTS_SNIPPET_PLACEHOLDER (C:\laragon\www\codersCast\node_modules\sass\sass.dart.js:25437:49)
    at Object._Future__propagateToListeners (C:\laragon\www\codersCast\node_modules\sass\sass.dart.js:4502:77)
    at _Future._completeError (C:\laragon\www\codersCast\node_modules\sass\sass.dart.js:25270:9)
    at _AsyncAwaitCompleter.completeError (C:\laragon\www\codersCast\node_modules\sass\sass.dart.js:24613:12)
    at Object._asyncRethrow (C:\laragon\www\codersCast\node_modules\sass\sass.dart.js:4251:17)
    at C:\laragon\www\codersCast\node_modules\sass\sass.dart.js:15754:20
    at _wrapJsFunctionForAsync_closure.$protected (C:\laragon\www\codersCast\node_modules\sass\sass.dart.js:4276:15)
    at _wrapJsFunctionForAsync_closure.call (C:\laragon\www\codersCast\node_modules\sass\sass.dart.js:24634:12)
    at _awaitOnObject_closure0.call (C:\laragon\www\codersCast\node_modules\sass\sass.dart.js:24626:25)
    at _RootZone.runBinary (C:\laragon\www\codersCast\node_modules\sass\sass.dart.js:26612:18)
    at _FutureListener.handleError (C:\laragon\www\codersCast\node_modules\sass\sass.dart.js:25140:19)
    at _Future__propagateToListeners_handleError.callLARACASTS_SNIPPET_PLACEHOLDER (C:\laragon\www\codersCast\node_modules\sass\sass.dart.js:25437:49)
    at Object._Future__propagateToListeners (C:\laragon\www\codersCast\node_modules\sass\sass.dart.js:4502:77)
    at _Future._completeError (C:\laragon\www\codersCast\node_modules\sass\sass.dart.js:25270:9)
    at _AsyncAwaitCompleter.completeError (C:\laragon\www\codersCast\node_modules\sass\sass.dart.js:24613:12)
    at Object._asyncRethrow (C:\laragon\www\codersCast\node_modules\sass\sass.dart.js:4251:17)
 @ ./resources/scss/app.scss

ERROR in ./resources/scss/app.scss (./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/src??postcss0!./node_modules/resolve-url-loader??ref--5-4!./node_modules/sass-loader/dist/cjs.js??ref--5-5!./resources/scss/app.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
   ╷
18 │ @import "bootstrap/functions";
   │         ^^^^^^^^^^^^^^^^^^^^^
   ╵
  resources\scss\argon-design-system.scss 18:9  @import
  resources\scss\app.scss 2:5                   root stylesheet
 @ ./resources/scss/app.scss 2:14-253
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! @ development: `cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the @ development script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Dell\AppData\Roaming\npm-cache\_logs20-10-23T22_52_04_463Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! @ dev: `npm run development`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the @ dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Dell\AppData\Roaming\npm-cache\_logs20-10-23T22_52_04_529Z-debug.log

SilenceBringer

5 years ago

Level 56

@sshateri not sure what's the problem, but you can try just split to 2 import statements:

@import '~bootstrap/scss/bootstrap';

@import '/resources/scss/argon-design-system.scss',
    '/resources/css/argon-design-system.css',
    '/resources/css/argon-design-system.css.map',
    '/resources/css/argon-design-system.min.css',
    '/resources/css/custom-profile-edit.css',
    '/resources/css/custom-user-profile.css',
    '/resources/css/fa-fonts.css',
    '/resources/css/font-awesome.css',
    '/resources/css/nucleo-icons.css',
    '/resources/css/nucleo-svg.css';

1 like

sshateri

5 years ago

Best Answer

Level 3

that's the first thing I did but still the same problem. going through all the files to see whats the problem. It's a hectic job. there might be an @import in one of these files that the actual file doesn't exist.

Please or to participate in this conversation.