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');
Related
I am attempting to set up a nuxt project with scss. I added the following packages to my project:
"sass": "^1.37.0",
"sass-loader": "10",
and I updated nuxt.config.js to say the following to point to my new scss main file:
// Global CSS: https://go.nuxtjs.dev/config-css
css: [
'~/assets/sass/main.scss'
],
I had to use older versions because i was getting errors with certain functions I was using but i managed to get it working correctly on my local machine, and it builds just fine repeatedly as I update code as well.
I am now trying to deploy to staging on a Linux/nginx server and I am getting the following errors when building npm run build:
ERROR in ./assets/sass/main.scss (./node_modules/css-loader/dist/cjs.js??ref--7-oneOf-1-1!./node_modules/postcss-loader/dist/cjs.js??ref--7-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--7-oneOf-1-3!./assets/sass/main.scss)
Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
SyntaxError
(1:1) postcss-custom-properties: <css input> Unknown word
> 1 | var(--font-size-2)/var(--font-ratio)
| ^
It looks like it's using css builder instead of sass builder! Does anyone know how to fix this? I doublechecked that the files on the server include the sass-loader and that the config is pointing to my .scss file, and i checked the documentation which states that Nuxt will automatically choose the correct loader.
What am I doing wrong?
I'm getting the following error:
ERROR in ./app/styles/index.scss (./node_modules/css-loader/dist/cjs.js??ref--12-1!./node_modules/resolve-url-loader??ref--12-2!./node_modules/sass-loader/lib/loader.js??ref--12-3!./app/styles/index.scss)
Module not found: Error: Can't resolve '../../images/global/univers/characters/border-universe-top.png' in '/home/wolf/app/styles'
# ./app/styles/index.scss (./node_modules/css-loader/dist/cjs.js??ref--12-1!./node_modules/resolve-url-loader??ref--12-2!./node_modules/sass-loader/lib/loader.js??ref--12-3!./app/styles/index.scss) 81:42-115
# ./app/styles/index.scss
# ./app/core/app.js
# multi ./node_modules/react-app-polyfill/ie11.js ./app/core/app.js
Now, the weird parts:
I made sure the path is correct
In that very same SCSS file, another image file is used through url(). This file is in the same directory as border-universe-top.png and is loaded just fine.
the two files are very similar (although it might not be relevant, they are both ~2kb)
I thought it might come from some webpack config options, but since some files are correctly resolved, I'm starting to winder if it might not come from something totally different.
Have you tried npm rebuild node-sass ?
I experienced this in the past and this resolved it.
I've got an error like so:
error: Cannot resolve module "<path>/src/routes" from "<path>/src/index.ts"
Imported from "file:///F:/Development/k8demo/api-deno/src/index.ts:2"
My problem was that Deno requires a .ts extension for imports unlike node.
Fix by adding .ts to the import.
I am new to Laravel and currently attempt to import vue to my Laravel project.
After I ran 'npm run dev' command and check a page built with blade layout which is downloaded from a boilerplate project, I see the error : Undefined index in style(mix('/css/frontend.css')). This css file exists in public/css.
This is the line that invokes this error.
{{ style(mix('/css/frontend.css')) }}
What is its meaning and how to fix it?
Also, I can't find the api documentation that tell the function of style() and mix().
If you know where the documentation is, please give me the link. Thanks!
Check webpack.mix.js to see if frontend.css is being compiled by Laravel Mix. If you don't see any reference to it, then you should reference the file in your Blade views with asset('/css/frontend.css') instead of mix().
mix() reads from public/mix-manifest.json to map your source filenames to their output name, which is useful when files are versioned for cache busting. A mix-manifest entry might look like this: "/css/app.css": "/css/app.css?id=7564ad125f69af0035c3". If your file wasn't compiled or copied with Laravel mix then it would not have an entry in mix-manifest.json, which would explain the undefined index error and why you need to use asset() instead.
Also, I don't know what style() is but it doesn't come with the Laravel framework.
Refs: https://laravel.com/docs/5.7/mix#versioning-and-cache-busting
I am using the grunt-webpack. Trying to start the webpack-dev-server gives this error
Module parse failed: /u/saxenat/react-blueprint/src/js/app.jsx Unexpected token (5:16)
You may need an appropriate loader to handle this file type.
Before you close this question, let me just say: webpack is bundling the files properly. The grunt-webpack plugin provides 2 tasks: grunt-webpack and grunt-webpack-dev-server. When I try HMR with the server, it is failing. Otherwise it works fine.
I have included babel-loader with presets es-2015 and react.
Any ideas?