How to fix module not found error in vue cli? - css

I am getting following error when I am trying to run my vue cli application. I have put my style.css file in assests folder and images in public/images folder.Then I have imported css file into main.js folder like this:"import "./assets/style.css";" Can anyone help me out. I have paste the error below.
My app was working before but Its not working now.
This relative module was not found:
* ./images/beeton-small-logo.png in ./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-3-1!./node_modules/postcss-loader/src??ref--6-oneOf-3-2!./src/assets/style.css

Related

How to solve - .css was blocked due to MIME type when building tailwind

I was building my tailwind css project with - npm run build. But then when I open builded index.html , css file wasn't loading.
This is showing .How can I fix this!
I dont know what to do
Check if the file path is correct and the file exists, in NodeJS you need to specify a path for static files.

"Components" folder not included in project structure

I have a strange issue with nextJS.
I created new directory components in the root folder and added some test component files.
While I try to import it, the pass exists, but at localhost I have error:
Module not found: Can't resolve '../../components/admin/AdminBoLayout'
The path is correct, and the component works 100% (tested this code with another nextJs project).
Why does problem appear?
P.S. according to this article, components directory exist in nextJs project structure.
Solved: just Ctrl+C and npm run dev in terminal
(restart localhost)

header.css file not importing

I have been creating a site on my IDE and it has been working perfectly. But I ran into problems when deploying to Netlify. After changing all my file names to lowercase, now my 'header.css' file is not importing into header.js. I have checked the file path and it is correct. Can anyone please help me?
https://github.com/genesis16/alphaomega
changed file names to lowercase.
changed npm versions
installed css loader
changed file path to './components/header.css'
import './header.css' import '..components/header.css'
warning in ./src/components/Card.js ⠀ There are multiple modules with
names that only differ in casing. This can lead to unexpected behavior
when compiling on a filesystem with other case-semantic.
I have saved the file as card.js to pass Netlify's casing requirements. But it is still showing in my error log with capital Card.js.
I expected to run Gatsby develop and have my site load up properly with the header.css file imported.

Why is Scout trying to alter files in non-specified directory?

I've used Scout before but haven't run into this problem... when I save a change to an scss file (the scss directory is specified as the "input" folder) which should then rewrite my styles.css file (in the specified "output" folder), I am given an error from scout stating "Error on line 61 of c: File not found or cannot be read:", and it then point to an image file in a separate folder within the site I'm working on.
Why could this be happening? I tried create two Scout projects for the same site: One where the root folder of the site is selected as the main directory and one where the folder a few levels into the site containing the scss and css files are held, but got the same results from both. I don't know why scout would be going into an image folder when the input/output folder are explicitly selected.
How can I make it so Scout just detects changes to my scss files and rewrites the css file without any nonsense about image files? Any help would be appreciated.
Edit: I hope this can give some insight, but the file that seems to be causing the error is being described in a location it is not in: C:\Users\me\Desktop\project/logo.png
There is a logo.png file in another location (C:\Users\me\Desktop\project\apply\assets\img\logo.png) but that doesn't seem to account for the error message. Very puzzled.
Second Edit: I'll try to give this one last bump with a little more info. At this point when I save a scss file I am still getting the same long error message in the scout app about an error, but my style.css file has stopped being affected at all since yesterday. The last message I got was a syntax error and then a very long backtrace message that looks something like this...
Backtrace:
C:/Users/me/Desktop/project/apply/assets/scss/_base.scss:6
C:/Users/me/Desktop/project/apply/assets/scss/style.scss:12
c:/program files (x86)/scout/vendor/gems/gems/sass- 3.2.1/lib/sass/../sass/script/variable.rb:49:in `_perform'
c:/program files (x86)/scout/vendor/gems/gems/sass-3.2.1/lib/sass/../sass/script/node.rb:40:in `perform'
c:/program files (x86)/scout/vendor/gems/gems/sass-3.2.1/lib/sass/../sass/tree/visitors/perform.rb:294:in `visit_prop'
org/jruby/RubyKernel.java:2096:in `send'

Rails-Heroku-SASS Syntax Errors For File

My repo SelfFunderworks perfectly fine at my local machine. When I am deploying on Heroku, I observe the errors as shown below:
Error compiling CSS asset
Sass::SyntaxError: File to import not found or unreadable: homepage/key_points.
Load paths:
/app/app/assets/images
/app/app/assets/javascripts
/app/app/assets/stylesheets
/app/vendor/assets/javascripts
/app/vendor/assets/stylesheets
/app/vendor/bundle/ruby/2.0.0/gems/jquery-ui-rails-4.1.0/app/assets/images
/app/vendor/bundle/ruby/2.0.0/gems/jquery-ui-rails-4.1.0/app/assets/javascripts
/app/vendor/bundle/ruby/2.0.0/gems/jquery-ui-rails-4.1.0/app/assets/stylesheets
/app/vendor/bundle/ruby/2.0.0/gems/jquery-ui-rails-3.0.4/app/assets/javascripts
(in /app/app/assets/stylesheets/main.scss:3)
/app/app/assets/stylesheets/homepage.scss:3
I identified the path and observed that homepage/key_points is residing under the following path on my local machine:
/views/preorder/homepage/_key_points.html.erb
Upon modifying the contents of homepage.scss (as shown below), Heroku still throws up the same error.
#import "preorder/homepage/key_points";
Appreciate if someone can guide where I am going wrong?
I'm not sure what's your intention there, but you are trying to import a HTML file into a CSS file, which would produce broken CSS if it were successful.
And you can only import files for assets from certain locations (app/assets, lib/assets or vendor/assets).
In your case, the clue is on /app/app/assets/images. Notice the double app there. First, please follow the guide on setting up assets compilation for Rails 4 on Heroku.
You seem to be missing gem 'rails_12factor', group: :production on your Gemfile.
I got the issue fixed. I overlooked /assets/stylesheets/homepage directory. It had some .css.scss files which upon renaming to .scss fixed the issue.

Resources