I have some confusion in file watcher output path:
My SCSS file is in project/resources/sass/app-front-ltr.scss folder.
I want the resulting CSS file to go into project/public/assets/front/app-ltr.css folder.
My current File Watcher setup:
How to configure this correctly?
Related
I just installed a fresh copy of Laravel 9 and added these lines to vite.config.js
build: {
outDir: '.dist',
}
In Laravel we already have a public folder containing robots.txt and favicon.ico. As per documentation and answers here like this one, I was expecting that "npm run build" will copy the contents from this directory to .dist directory, but this does not seem to happen. I can see only manifest file and assets folder containing js and CSS and no robots.txt and no faviocn.ico. Am I doing something wrong??
I was trying to run a github page with Jekyll theme,and the website runs fine locally. However, when I try to urn in on htttps://username.github.io, GitHub cannot build the website.
I got the following error message :
Your site is having problems building: Your SCSS file myblog/assets/main.scss has an error on line 1: File to import not found or unreadable: minimaless.
The main.scss :
---
# Only the main Sass file needs front matter (the dashes are enough)
---
#import "minimaless";
It seems to be the path to the .scss file expected by GitHub is different from where the Jekyll theme put it. I checked some posts mentioned that I should put the absolute path of .scss in _config.yml file.
It seems to be the path to the .scss file expected by GitHub is different from where the Jekyll theme put it. I checked some posts link mentioned that I should put the absolute path of .scss in the directory of urlbase, which is /myblog. But I am not familiar with ruby, so I am not sure how should I do it.
The folder structure is like this :
myblog/
- assets/
- main.scss
- _sasss/
- minimaless.scss
- minimaless/
- basic.scss
- layout.scss
- hight-lighting.scss
- _config.yml
This is my GitHub page folder :
https://github.com/Po-Hsuan-Huang/Po-Hsuan-Huang-github.io
The issue could be because your source contents are within a subdirectory myblog. Try moving all the contents to the root of your repository.
It could also be because of the following in your config file:
theme: minimaless
#remote_theme: brettinternet/minimaless
theme: minimaless is not supported on GitHub Pages. Comment it out.
And finally, _site directory should not be checked into version control. Delete it from your repository and then add an entry for it in your .gitignore file.
css file path is---http://example.com/css/1/styles.css.
I have checked. File is already in the directory.
But not loaded.
Before it was working fine. Suddenly ALL CSS and JS file got 404 error
css file path via ftp
404 for css file
I do not understand the meaning of the ~ char in the following line of code in a scss file:
#import "~bootstrap/dist/css/bootstrap.min.css";
Since it's in the file path, I guess it's the "Bootstrap user home directory".
On Linux or Unix, home directories are named ~:
~ : the current user directory (yours)
~juan would be your home directory.
~bootstrap : bootstrap's user directory (ex: /home/bootstrap or maybe /usr/share/bootstrap or /opt/bootstrap)
More examples on https://askubuntu.com/questions/656869/how-does-using-the-tilde-work-as-a-shortcut-to-my-home-directory
So maybe your bootstrap files are located in a particular directory owned by a bootstrap user having that directory as his $HOME directory.
In that case, it's not at all related to Sass, it's only a regular file path.
That is not part of sass, it's actually a feature of sass-loader which you are probably using with webpack.
What it does is importing the file relative to the node_modules folder instead of the current file.
Check out sass-loader's documentation for more details: https://github.com/webpack-contrib/sass-loader#imports.
I have this structure of SCSS:
app
styles.scss
bower_components
_colors.scss
_fonts.scss
sass
index.scss
styles.scss:
#import "sass/index";
index.scss:
#import "bower_components/_colors";
#import "bower_components/_fonts";
app folder is set as working directory in File Watcher settings and is marked as "Resource Root" in WebStorm. However, transpiling fails with error:
error sass/index.scss (Line 3: File to import not found or unreadable: bower_components/_colors.)
I've read that #imports evaluated in SCSS
relative to current file location
relative to root location
But in my case it is obvious that Ruby transpiler doesn't do attempt to find files relative to root location. Is it a bug? Or I am doing something wrong?
I installed SCSS through Ruby and set up File Watcher according to https://www.jetbrains.com/help/webstorm/2016.1/transpiling-sass-less-and-scss-to-css.html
This is my File Watcher settings:
You will get exactly the same issue when running scss.bat in command line:
C:\Projects\prj>cd app
C:\Projects\prj\app>C:/Ruby193/bin/scss.bat --no-cache --update sass/index.scss
error sass/index.scss (Line 1: File to import not found or unreadable: bower_components/_colors.)
See https://github.com/sass/sass/issues/652: current working directory being automatically placed on the Sass load path is deprecated in 3.3. You need passing the load path explicitly with -I option to work with folders relative to the working directory. Like: