I tried to precompile my project on production but it gives me this error and I don't know as to where it is pointing to since it's really vague.
Sass::SyntaxError: Invalid CSS after "": expected selector, was "#media print"
(in /home/deploy/production/project-name/app/assets/stylesheets/admin.css)
(sass):124
The path links to the manifest file of the admin/ folders of my assets.
Some of the stylesheets' format is .css.scss.erb.
Check your sass files in your app/assets/ directory.
I think you're using sprockets in your admin.css at line 124?
You'll see the file you want to include having an sass syntax error.
Example:
# app/assets/admin.css
/* ..
(line 124) * require my-file
.. */
now you should look for the my-file.
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.
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 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 having a problem with assets loading in Heroku and haven't been able to resolve this issue on my own. Right now, I am unable to get assets to load on my app in Heroku.
I was told that I needed to precompile my assets locally. The only way I could get this to work was by changing = require_self and = require_tree . in application.css manifest to #import. From there I was able to run rake assets:precompile, but no styles loaded on Heroku or locally. I switched things back and now styles show up locally, but I can no longer push to heroku. I get this error:
rake aborted!
Sass::SyntaxError: Invalid CSS after "...AwesomeEotPath:": expected pseudoclass or pseudoelement, was " 'fontawesome-..."
(in /tmp/build/app/assets/stylesheets/application.css)
(sass):7153
Based on the error message you posted there is a syntax error in your sass file. Is there a comma after that line around 7152 or 7153? Or maybe " ; " instead of " : " ?
I saw similar questions but the error clause is a bit different, an I think is something about the assets pipeline.
The error:
NoMethodError: undefined method '[]' for nil:NilClass
(in app/app/assets/stylesheets/entypo.css)
/app/vendor/bundle/ruby/1.9.1/gems/sass-rails-3.2.6/lib/sass/rails/helpers.rb:32 in 'resolver'
What I did was to implement a Boostrap theme in the vendor directory, so is already included in the assets pipeline.
The entypo.css is the first file required by the theme main file called style.css , which is placed in
app/assets/stylesheets/
while entypo.css is placed in:
vendor/assets/stylesheets/
I'm not sure that the error resides here, because locally everything works just fine, the issue comes when I deploy on Heroku, because for some reason the compiler seeks for the css to compile in
app/app/assets/stylesheets/entypo.css
Any clue?