Sample app available for download which shows the issue:
https://github.com/chrillewoodz/ng-boilerplate/tree/universal
I'm trying to get angular universal to work but it throws error for a SCSS import in one of the components SCSS files:
#import './src/assets/styles/utils/_exports';
It works when running it normally without universal but when it runs with universal it treats the import as relative to the component and not root.
So the path becomes:
src/app/shared/components/breadcrumbs/src/assets/styles/utils
Instead of:
src/assets/styles/utils
How can I set the path so that it works in both scenarios?
I've done some digging but unable to find similar issues, the only issues that has come up is that SASS doesn't work properly with universal and AOT. Which would be a completely separate issue once I've managed to solve this one.
you have to check from the base which is "" in tsconfig.app.json file, so the path should be relative to this "baseUrl": "", path.if you need your path as "src/assets/styles/utils" you have to change "baseUrl": "/src" of "src/assets/styles/utils".can you please share your tsconfig.app.json as asset is parallel to it or may be your folder structure.As you have to check the your SCSS file relative to asset you want to access.
Related
i have a folder filled with svg's (path: src/assets/icons).
The css function url() is implemented like this:
url("/assets/icons/CheckSmall.svg");
It finds the svg data, when I run ng serve.
But when I build my Project, it cant find the svg data. Although it exists in the folder dist/myApp/assets/icons/CheckSmall.svg
I have read through many forums and discussions and tested a few things (One of many discussions).
For example i used different pathing "strategies":
1. url("^assets/icons/CheckSmall.svg")
2. url("~/assets/icons/CheckSmall.svg")
For number (1) it seems like it is not a supported feature in Angular, thats why i dont want to use it. And for (2) it copies my Assets and puts them into the folder dist/myApp.
Is there a viable(supported or documented) alternative? Or can I somehow adjust the angular.json.
Try using the following syntax:
background-image: url('../../assets/icons/<file-name>')
Where the route is relative to the css file
If you're setting non-default baseHref or deployUrl flags as part of the build that can also affect it
Try using that approach in styles.scss or in the relevant component, without the scss variable. The relative path won't be correct when the scss variable is used in different folders
I'm trying to have a global .scss file that gets imported into all pages.
I have the following project structure
/src
/pages
index.js
index.module.scss
/templates
/restaurants
/hungry
hungry.js
hungry.module.scss
/styles
typography.scss
variables.scss
/package.json
gatsby-plugin-sass
node-sass
/fonts
...
I tried passing options via gatsby-plugin-sass and also exposing global styles with gatsby-browser.js using this link: Include sass in gatsby globally but no luck.
My typography.scss file
typography.scss
Passing options to gatsby-config.js
My gatsby-config.js file
Error message
Exposing global styles with gatsby-browser.js
gatsby-browser.js
hungry.module.scss
Error message
I've also tried reading the documentation:
https://www.gatsbyjs.com/docs/how-to/styling/global-css/
I'm new to Gatsby and completely out of ideas at this point. I appreciate any help.
Thank you.
The approach of using gatsby-browser.js is perfectly valid and it should work, in addition, your paths look correct to me.
Regarding your typography.scss, it clearly seems that the relative paths are not working, try adding/removing relativity using ../../path/to/fonts or ./path/to/fonts.
Another approach that may work for you, is removing the options from your gatsby-plugin-sass plugin and import it as .scss import to the desired file.
Let's say that you fix the issue with the relative paths in your typography.scss (first step). Once done, your .subtitle class file, you can simply:
#import '../../../styles/fonts/typography.scss' use it. Something like:
#import '../../../styles/fonts/typography.scss
.subtitle{
font-family: $font-medium;
}
So, summarizing. The first step should be to fix the relative font importation and then, import that file directly in the needed .scss files.
Once you comment the manifest plugin (which request a missing asset in the GitHub), it loads the fonts correctly:
Notice the K, quite unique in this typography.
Gatsby uses the path inside /pages folder to build URLs of the pages. You were putting the templates folder inside the /pages folder, causing some weird behavior. Move it outside to fix the issue.
The general error: SyntaxError: Invalid or unexpected token, referencing line 1 of index.css.
This is the result of encountering CSS syntax in a CSS file that I'm trying to import for styling.
Attempted fixes and experiments:
Deleted everything out of the CSS file and exported an empty JS module. This works, verifying that the import is treating it as a JS file, not CSS.
Removing the #import statement from line 1 of the CSS file. Of course, this fails to make a difference because the remaining CSS syntax throws the same error.
Paired down the Webpack config file to eliminate the surface area of the problem. Rendering should be handled by Webpack, so the issue may reside there. Config was very basic and set to handle CSS, SASS, JS, and JSX.
Tried importing the CSS file from other file locations, including the server's app.js file.
Tried making use of ExtractTextPlugin as an bundling alternative.
Tried making use of Isomorphic Style Loader.
All in all, given the attempted fixes and tests listed above, the issue seems unrelated to Webpack per se. It's as if the server side rendering is attempting to import the CSS file before Weback gets involved.
The fix, it turns out, was to use the ignore-styles package in our server app.js file:
require('ignore-styles')
The description as listed on the repo:
A babel/register style hook to ignore style imports when running in Node. This is for projects that use something like Webpack to enable CSS imports in JavaScript.
Preface: I can't use webpack. It breaks too much of my AWS stuff and I'm too frustrated finding ever more problems. I wish I could use the convenience of webpack but I stopped using it and AWS now works. Now its all watchify and babel.
Can I use CSS/Sass without using Webpack (as mentioned) or import CSS Modules, PostCSS etc?
Issue: I can link a css file, pass in the classes to my component and it all renders out proper div / class syntax, but (I assume) the virtual DOM just doesnt load it. How can I get around this?
[Edited as I got a down-vote, just to be safe.]
You can just run gulp, and gulp-sass. That compiles a .css file and you can just manually include that file in the <head> of your file. Try there are dozens of tutorials on Google like this one
I'm upgrading a Rails3.1 application to use the asset pipeline. I'm using less-rails gem to compile assets (before using asset pipeline, more plugin was used).
A few of existing less stylesheets reference other stylesheets in the #import directive with relative paths. There is were the problem arises, since the lookup via relative paths doesn't work.
Example:
first stylesheet: app/assets/stylesheets/shared/env.less
second stylesheet: app/assets/stylesheets/shared/colours.less
The first stylesheet is referencing the other one:
#import "colours.less";
This fails. It does start working when I modify the reference using asset helpers:
#import asset_path("colours.less")
Is this the only way to make the relative paths work? It would mean changing a lot of stylesheets references... or is the problem in my setup of less-rails and this should work?
EDIT:
Even using asset helpers doesn't work for me. The only way to get it working is by using paths starting in assets root, like this:
#import "shared/colours.less";
After some more research I found it is OK to use relative paths hence this should work. I found it is an open issue with less-rails gem:
https://github.com/metaskills/less-rails/pull/64
Hopefully we can solve this in short time.