I built a very simple static page deployed to Github Pages.
I noticed quickly that most of the css background images failed to load.
After doing some digging around I found that the culprit is my SCSS/CSS.
In VSCode, my relative path for an image looks something like this:
#media (min-resolution: 192dpi) and (min-width: 37.5em),
(-webkit-min-device-pixel-ratio: 2) and (min-width: 37.5em),
(min-width: 125em) {
background-image: linear-gradient(
to right bottom,
rgba($color-primary-light, 0.801),
rgba($color-primary-dark, 0.801)
),
url(../../img/apple-mountains_1920.jpg);
However, this was causing the URL to become clipped, stepping backward out of the repository.
What it should be:
https://name.gethub.io/repositoryname/img/apple-mountains_1920.jpg
What I was getting:
https://name.gethub.io/img/apple-mountains_1920.jpg
To fix this, I simply needed to go through and remove one period from all of my background-image paths:
url(../../img/apple-mountains_1920.jpg);
Becomes:
url(./../img/apple-mountains_1920.jpg);
One thing that is interesting, is that in VSCode on my machine, if I don't use the format (../../img...) the file isn't found.
What am I doing wrong? I'm fairly new to deployment, is this going to be a problem with any webhost I use or is it something unique to Github pages?
Better yet, is there a way I can automate fix this in my build process?
Right now I just run my SCSS through this series:
"compile:sass": "node-sass sass/main.scss css/style.comp.css",
"concat:css": "concat -o css/style.concat.css css/icon-font.css css/style.comp.css",
"prefix:css": "postcss --use autoprefixer -b \"last 5 versions\" css/style.concat.css -o css/style.prefix.css",
"compress:css": "node-sass css/style.prefix.css css/main.css --output-style compressed",
EDIT:
My File tree structure is:
Project Folder
|- index.html
|- [css folder]
|- [img folder]
|- [js folder]
|- [sass folder]
| |- main.scss
| |- [abstracts]
| | |-_functions.scss
| | |-_mixins.scss
| | |-_variables.scss
| |- [base]
| | |-_base.scss
| | |-_typography.scss
| | |-_utilities.scss
| |- [components]
| | |-_buttons.scss
| | |-_form.scss
| | |-_cards.scss
| |- [layout]
| | |-_footer.scss
| | |-_header.scss
| | |-_navigation.scss
| |- [pages]
| | |-_home.scss
My development machine is Windows 10, if that makes a difference.
Thanks!
Try that '../img/apple-mountains_1920.jpg'
If your file-tree look like
somefolder
index.html
img
thisImage
But what would be better - add your file-tree to question
After digging around, it seems that the problem is due to me attempting to use a 7-1 style folder structure where the source SASS isn't in the same or similar structure to the CSS.
Seems that I might need to take advantage of a package like resolve-url-loader in order to fix the relative paths automatically.
Related
I need to iterate over a subfolder for SCSS files in a variety of locations to compile in CSS (obviously). However, I have no idea how to do this, not being skilled in that area. I am also hampered by the fact I have to try to do this using NPM, and SASS (not node-sass).
Could someone give me a whistle-stop tour on how to achieve what I want?
It might also be worth pointing out that the SCSS files may reside in the SRC folder on the odd occasion, and I need to create the CSS files in the folder the SCSS was found in :(
As an example my folder structure looks a little like this;
Root
|
|- Components
| |- src
| |- styles
| |- buttons.scss
|
|- package.json
The end result would look like this
Root
|
|- Components
| |- src
| |- styles
| |- buttons.scss
| |- buttons.css
|
|- package.json
Any help would be greatly appreciated as I would like to learn how to do this once and for all ;)
I'm trying to find a way to compile my multiple scss files into one css file.
scripts are in package.json using node-sass
The best I've found for the moment is : sass --watch .assets/css/scss/:assets/css
The problem is it creates one css file for each scss file plus a css map file.
I was previously working without watch node-sass --include-path scss .assets/css/scss/style.scss assets/css/style.css but had to run the command at each save.
Using sass --watch .assets/css/scss/style.scss:assets/css/style.css with style.scss like this :
#import 'test1.scss';
#import 'test2.scss'
is not working but console say :
Compiled style.scss to style.css.
Compiled test1.scss to test1.css
Am i missing something?
EDIT : for some reasons, running only sass without node on a subsystem linux is causing some blue screen. Using node-sass --watch ./assets/css/scss/style.scss:assets/css/style.css or node-sass --watch ./assets/css/scss:assets/css return a npm error : code ELIFECYCLE errno 1
I've tried different solutions and the one that worked for what i wanted was that one : Using node sass watch with npm
Had the remove the dependencies and the directory bacause i have to write on only one file.
have to run this one to make it work
"css-watch: node-sass --include-path scss ./assets/css/scss/style.scss -w /assets/css/style.css"
including files in the style.scss without _ in the name is working fine with a simple import and detect all updates in the imported files.
Given the following directory structure
root
|- src
| |- collect
| | |-collect.scss
| |- pack-a
| | |-a.scss
| |- pack-b
| | |-b.scss
|- build (generated)
| |- collect
| | |-collect.css
| |- pack-a
| | |-a.css
| |- pack-b
| | |-b.css
and collect.css with the following content
// ./src/collect/collect.scss
#import "../pack-a/a.scss";
#import "../pack-b/b.scss";
(i) run sass ./src/collect:./bld/collect to generate ./bld/collect/collect.css
(ii) run sass ./src:./bld to generate all
All your SASS partials should be renamed to begin with an underscore character: _.
From the SASS Basics guide:
A partial is a Sass file named with a leading underscore. You might name it something like _partial.scss. The underscore lets Sass know that the file is only a partial file and that it should not be generated into a CSS file.
You can continue to import the partial files into your main styles.scss file the same way, using their normal names and omitting the underscore character. You can also omit the '.scss' if you'd like. To follow the new SASS syntax version you should be using #use to import partial SASS files as a module, rather than #import.
Then you just transpile that main build file and it should work fine.
everybody.
I have a problem with stylus import.
In my project I'am using such methode of import:
#import "project/**/*.styl"
And also i have this bem folder structure:
Project/
|- Project.styl
|- Block1/
| |- Block1.styl
| |- _Element1/
| | |- _Element1.styl
| | |- __Modificator1/
| | | |- __Modificator1.styl
|- Block2/
|- Block3/
In general, the problem is that when bundle.css is ready, styles in it goes in wrong way. First in it goes modificators, then elements and only then blocks, so modificator always overwrites by elements, and finnaly they don't work ... that how looks my code:
HTML:
<div class="block1_element1 block1_element1__modificator1"></div>
CSS:
.block1_element1__modificator1{font-size: 14px}
.block1_element1{font-size: 16px}
In result will be 16px font size ...
If someone know how to change order from end of branch to the start, please give me advice how to make it.s
The Problem
Wrong order of Stylus imported files.
The Reason
When using File Globing in Stylus i.e. **/* Stylus engine orders files by names so the order of imported files becomes __Modificator(n).styl then _Element(n).styl then Block(n).styl and that of course what is causing wrong CSS styles.
Possible Solution
Use index.styl file in each directory/subdirectory, inside each index.styl file import all the files in the current directory then all index.styl files of all subdirectories.
Example
The project structure should be like below:
Project/
|- Project.styl
|- Block1/
| |- index.styl
| |- Block1.styl
| |- _Element1/
| | |- index.styl
| | |- _Element1.styl
| | |- __Modificator1/
| | | |- index.styl
| | | |- __Modificator1.styl
|- Block2/
|- Block3/
And here what should be inside the index.styl files
inside Project.styl
#import "Block1"
#import "Block2"
...
inside any Block directory index.styl file
#import "_Element1"
#import "_Element2"
#import "Block1.styl" // current parent block
...
inside any Element directory index.styl file
#import "__Modificator1"
#import "__Modificator2"
#import "_Element1.styl" // current parent Element
...
I'm trying to include a picture from my ubuntu machine into a gvisTable.
The path is specified as
<img src="google_logo.jpg"/>
And the folder structure looks like this:
+---/srv/shiny-server
| +---shinyApp
| +---server.R
| +---ui.R
| +---wwww
| +---google_logo.jpg
Pictures with an url do work, I played around with different placements of google_logo.jpg and the permission of google_logo.jpg, but I can't make it work.
In my css file I can access local images in the same directory with url("image.png")
Any suggestions?
So as in the question.
I have structure of folders lets say like this:
|-root
| |
| |-someFolder
| | |
| | |-someSubFolder
| |
| |-someAnotherFolder
etc. in general I don't know far folder can be nested, but I need sometimes to
find path to a folder, that I don't know it's location (only name).
How can I do this using CMake? The only thing i found was find_path, but as I am looking for another CMakeLists.txt file in whole project, that is in the specific folder I cannot effectively use it.
So what is the way to find path to folder of given name provided I know path to the root folder?