I am in the process of integrating Metronic 8 with Laravel 8.
I have followed the guide from Metronic in their documentation but when I run npm run dev it webmix gets to 98% and then fails with the following output:
ERROR in ./resources/src/sass/style.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
╷
6 │ #import "../../../../tools/node_modules/bootstrap/scss/root";
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
resources/src/sass/components/components.scss 6:9 #import
resources/src/sass/style.scss 12:9 root stylesheet
at processResult (/Users/jakefeeley/Sites/certhub/saas/node_modules/webpack/lib/NormalModule.js:721:19)
at /Users/jakefeeley/Sites/certhub/saas/node_modules/webpack/lib/NormalModule.js:827:5
at /Users/jakefeeley/Sites/certhub/saas/node_modules/loader-runner/lib/LoaderRunner.js:399:11
at /Users/jakefeeley/Sites/certhub/saas/node_modules/loader-runner/lib/LoaderRunner.js:251:18
at context.callback (/Users/jakefeeley/Sites/certhub/saas/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
at /Users/jakefeeley/Sites/certhub/saas/node_modules/sass-loader/dist/index.js:54:7
at Function.call$2 (/Users/jakefeeley/Sites/certhub/saas/node_modules/sass/sass.dart.js:95825:16)
at _render_closure1.call$2 (/Users/jakefeeley/Sites/certhub/saas/node_modules/sass/sass.dart.js:83882:12)
at _RootZone.runBinary$3$3 (/Users/jakefeeley/Sites/certhub/saas/node_modules/sass/sass.dart.js:28060:18)
at _FutureListener.handleError$1 (/Users/jakefeeley/Sites/certhub/saas/node_modules/sass/sass.dart.js:26590:21)
ERROR in /assets/js/scripts.bundle
Module not found: Error: Can't resolve '/Users/jakefeeley/Sites/certhub/saas/resources/src/webpack/scripts.js' in '/Users/jakefeeley/Sites/certhub/s
My webpack.mix.js file looks exactly like the example on the documentation:
https://preview.keenthemes.com/metronic8/demo1/documentation/getting-started/integration/laravel.html
I figured it out.
In the docs where Metronic tells you to swap ../../../../tools for ~, i just had to ignore that and just leave it at the root. e.g 'node_modules/bootstrap/scss/root'
Related
I've a project that uses create-react-app and a remotely hosted colors.scss file that only has the definition of colors inside (content below).
$color-blue: #2281ff;
$color-cyan: #11a0f2;
$color-lue-light: #cfd7fc;
Next I've an index.scss that looks the following way:
#import url('http://url.domain/colors.scss');
body: {
background-color: $color-blue;
}
When the app is being build I get the following error
SassError: Undefined variable: "$color-blue".
on line 4 of src/index.scss
>> background-color: $color-blue;
this is when using node-sass
Next I've tried changing node-sass to dart-sass which is just sass so ran npm uninstall node-sass and then npm install sass
my file looked like this
#use url('http://url.domain/colors.scss');
body: {
background-color: $color-blue;
}
this yielded an error
SassError: Expected string.
╷
1 │ #use url('http://url.domain/color.scss');
rewriting the import to
#use "http://url.domain/color.scss";
yielded
SassError: Can't find stylesheet to import.
╷
1 │ #use "http://url.domain/color.scss";
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
is it not possible to use variables from a remote source? Or am I missing something?
NOTE: http://url.domain/color.scss is an abstracted version of the link, when the real one is pasted into the browser I can see the correct stylesheet with variables loaded.
Yes, you cannot use the variables defined in the remote SCSS file. We ran into a similar issue. So, we downloaded the remote scss file as part of the build process and referenced the downloaded file as a local file.
Trying to build an Angular project and I'm getting the errors below. This project built fine last week. I made some changes to other projects that use the Dlls from this project, but no changes to this project. I already spent a lot of time troubleshooting it with no luck and appreciate any help.
ERROR: PostCSS received undefined instead of CSS string
An unhandled exception occurred: PostCSS received undefined instead of CSS string
This can sometimes happen if node-sass was compiled for a different version of Node.js than you're currently running (ie if you've recently changed your Node.js version). You can fix that with:
npm rebuild node-sass
if you are using webpack, and trying to use sass-loader, also add sass
I had this same issue when attempting to test an Angular library, and the issue was I had [``] instead of [] in the styles property of my component metadata.
Wrong
#Component({
selector: 'my-input',
template: `
<input
... />
`,
styles: [``],
Right
#Component({
selector: 'my-input',
template: `
<input
... />
`,
styles: [],
I had similar problem. I was trying to build an angular library and the message below appeared:
Building Angular Package
------------------------------------------------------------------------------
Building entry point 'library-name'
------------------------------------------------------------------------------
Compiling TypeScript sources through ngc
ERROR: PostCSS received undefined instead of CSS string
An unhandled exception occurred: PostCSS received undefined instead of CSS string
See "/tmp/ng-itlEgm/angular-errors.log" for further details.
[12:03:38] 'compile' errored after 17 s
[12:03:38] Error: Command `ng build library-name --prod` exited with code 127
at ChildProcess.handleSubShellExit (/node_modules/gulp-run/command.js:166:13)
at Object.onceWrapper (events.js:422:26)
at ChildProcess.emit (events.js:315:20)
at ChildProcess.EventEmitter.emit (domain.js:505:15)
at Process.ChildProcess._handle.onexit (internal/child_process.js:275:12)
[12:03:38] 'build' errored after 17 s
I was using gulp-run to execute the command ng build library-name --prod. But, executing the command ng build library-name --prod directly on the terminal, the log error was smaller, but similar too.
The problem was in one component. The component had one styleURL (Angular component decorator), like this:
...component.css
but, the library uses scss. So, I changed the path to:
...component.scss
and I executed the command 'ng build library-name --prod'. So, the error didn't appear again.
I was using NVM v0.35.2 (allow to have more than one NodeJS version installed in my machine); NodeJS v12.18.2; Ubuntu x64 18.0.4 LTS and Angular CLI 9.1.9.
I faced the same situation now and the command that helped me is -
npm i node-sass -D
Check the node version, see if the version of node changes cause this problem. I use node version 16.14.2 which occured this error, after switch to 12.16.1 it works well. Just check your node-sass and node version will find a way out.
This can happen due to change in version of node. I had same issue with a NUXT app. What I did was
using yarn, in the root directory of your project, run yarn. But if you're using npm run npm install
start your project again.
I have Laravel project and I want to generate css file from scss. My webpack.mix.js file looks like this:
mix.sass('resources/assets/sass/style.scss', 'public/css/style.css');
when I run command npm run dev I have error:
ERROR in ./resources/assets/sass/style.scss
Module build failed: ModuleNotFoundError: Module not found: Error: Can't resolve '../images/bg-main.png' in '/var/www/html/bitpay/resources/assets/sass'
ERROR in ./node_modules/css-loader??ref--4-2!./node_modules/postcss-loader/lib??postcss!./node_modules/resolve-url-loader??ref--4-4!./node_modules/sass-loader/lib/loader.js??ref--4-5!./resources/assets/sass/style.scss
Module not found: Error: Can't resolve '../images/bg-main.png' in '/var/www/html/bitpay/resources/assets/sass'
# ./node_modules/css-loader??ref--4-2!./node_modules/postcss-loader/lib??postcss!./node_modules/resolve-url-loader??ref--4-4!./node_modules/sass-loader/lib/loader.js??ref--4-5!./resources/assets/sass/style.scss 7:14663-14695
# ./resources/assets/sass/style.scss
# multi ./node_modules/laravel-mix/src/builder/mock-entry.js ./resources/assets/sass/style.scss
ERROR in ./node_modules/css-loader??ref--4-2!./node_modules/postcss-loader/lib??postcss!./node_modules/resolve-url-loader??ref--4-4!./node_modules/sass-loader/lib/loader.js??ref--4-5!./resources/assets/sass/style.scss
Module not found: Error: Can't resolve '../images/bg-recommendations.png' in '/var/www/html/bitpay/resources/assets/sass'
# ./node_modules/css-loader??ref--4-2!./node_modules/postcss-loader/lib??postcss!./node_modules/resolve-url-loader??ref--4-4!./node_modules/sass-loader/lib/loader.js??ref--4-5!./resources/assets/sass/style.scss 7:17599-17642 7:22181-22224
# ./resources/assets/sass/style.scss
# multi ./node_modules/laravel-mix/src/builder/mock-entry.js ./resources/assets/sass/style.scss
How to add images folder to compilation?
The problem is that mix cannot find the image bg-main.png that you are referring to inside style.scss.
You can either add the mix option not to process css urls as shown here:
mix.options({
processCssUrls: false
});
That has some consequences:
mix will not check for the image's existence.
mix will not automatically copy the image to the public directory.
The better solution is to place the image where mix expects it: mix expects ../images/bg-main.png to be inside directory resources/images/
References:
https://laravel-mix.com/docs/6.0/url-rewriting
https://laravel-mix.com/docs/6.0/faq#why-is-it-saying-that-an-image-in-my-css-file-cant-be-found-in-node_modules
That image files maybe not exist.
It is an incorrect path error, you used ./images/bg-main.png somewhere in your CSS. So locate that instance and change the path thus background-image:url('~/images/bg-main.png');
I'm using Sage framework to build a WordPress site and would like to use a custom CSS framework, which is Materialize CSS. Sage uses Webpack to build the CSS.
Upon building, I get the following error message:
WAIT Compiling... 1:55:57 PM
ERROR Failed to compile with 1 errors 1:55:57 PM
error in ./resources/assets/styles/main.scss
Module build failed:
.#{$color_name}.#{$color_type} {
^
Invalid CSS after ".white": expected selector, was ".#0a0a0a"
in /mnt/c/Users/Kenny/Local Sites/ngcsaget1/app/public/wp-content/themes/ngc11/node_modules/materialize-css/sass/components/_color-classes.scss (line 14, column 7)
# ./resources/assets/styles/main.scss 2:14-358 21:1-42:3 22:19-363
# multi ./resources/assets/build/util/../helpers/hmr-client.js ./scripts/main.js ./styles/main.scss
Here's the Materialize Github repo: https://github.com/Dogfalo/materialize
If needed, here's the github for the Sage framework, the webpack.config.js is in the build folder: https://github.com/roots/sage/tree/master/resources/assets
note:
I get the error when I try to import the .scss file:
#import "~materialize-css/sass/materialize";
If I import the full .css file, I get access to the framework, but it's plain ol' css:
#import "~materialize-css/dist/css/materialize";
Here's the webpack code: https://github.com/roots/sage/blob/master/resources/assets/build/webpack.config.js
I have followed the following instruction in order to install Bootstrap 4 alpha on my Laravel 5.3 project, but it pops up errors.
Steps to install:
npm install bootstrap#4.0.0-alpha.3 --save-dev
resources/assets/sass/app.scss
// change this line
#import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
//to this
#import "node_modules/bootstrap/scss/bootstrap";
resources/assets/sass/variables.scss
// change this line to rem or em units, or just remove it entirely
$font-size-base: 14px;
resources/assets/js/bootstrap.js
// change this line
require('bootstrap-sass');
// to this
require('bootstrap');
I got the following error
ERROR in ./resources/assets/js/bootstrap.js Module not found: Error:
Can't resolve 'bootstrap' in
'C:\xampp\htdocs\soyegg\resources\assets\js' #
./resources/assets/js/bootstrap.js 11:0-20 #
./resources/assets/js/app.js
And I refresh my page and got this for console log
Uncaught Error: Cannot find module "bootstrap"
at webpackMissingModule (eval at (app.js:89), :11:65)
at eval (eval at (app.js:89), :11:151)
at Object. (app.js:89)
at webpack_require (app.js:20)
at eval (eval at (app.js:228), :1:1)
at Object. (app.js:228)
at webpack_require (app.js:20)
at app.js:64
at app.js:67
Please help. Thanks
Not sure why, but I eventually try to reinstall alpha.5 by npm install bootstrap#4.0.0-alpha.5 --save-dev and it fixed the problem.