I'm having an issue and can't find a solution.
In our create-react-app work project I have configured a jsconfig.json file that allows us for easy absolute imports.
{
"compilerOptions": {
"baseUrl": "src"
},
"include": ["src", "src/*", "src/**/*"]
}
And that works perfectly for normal file imports - so I can write something like:
import { selectComplianceGraphQuery } from 'redux/slices/graph/complianceQuerySlice.slice';
and it will work and be clickable so it takes us to imported file.
However, same doesn't apply to when I try to import CSS files. It still works, as in even if I do absolute import for CSS file it will do the changes that file specifies, but we can't click through on the import statement to take us to that CSS file.
import 'styles/custom_styles/containers-style.css'
That's just an example. It accepts the changes specified there, but does not allow for click through?
Did anyone have a similar problem, and if so what are the possible solutions?
I tried googling to find a solution but to not avail - as well tried to use new friend ChatGPT but it did not help me out much. Perhaps I did not ask the correct question.
Related
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.
I have an GastbyJS application, and I'm trying to add typescript on it. I solve most of the issues, but I'm not able to make the css module work with it.
I have this import in my file, that works fine:
import styles from "./card.module.css"
But when I added the typescript config it says that Cannot find module './card.module.css'.ts(2307)
I tried to use some gatsby plugins, but they didn`t work as expected.
The whole code is here: github
I had the same problem and after trying all the various plugins I came across this solution which worked for me.
Create a css.d.ts file with:
declare module '*.css' {
const content: { [className: string]: string };
export default content;
}
Add these lines to your tsconfig.json file:
"esModuleInterop": true,
"files": ["./src/typings/css.d.ts"]
The "files" path needs to match where your type definition file is.
https://github.com/thetrevorharmon/gatsby-starter-typescript-sass/issues/1#issuecomment-436748732
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.
In a NativeScript app I'm trying to apply some global styles that will be shared across the app.
This is my structure:
- styles
- partials
- _buttons.scss
- _exports.scss
_buttons.scss:
.flt-btn {
border-radius: 35px;
}
_exports.scss:
#import '_buttons.scss';
app.css:
#import './styles/partials/_exports.scss';
As you can see the the styles for .flt-btn should be applied, but they're not.
I'm using the class in a feature module that's lazy loaded, login like this:
<Button class="flt-btn" text="A button"></Button>
If I put the btn styles directly in app.css without any imports it works, but since this is a css file I can't use scss in it. So I'm not sure if the imports will ever work by doing it like this.
How can I make sure that the styles from the partials imports are applied application-wide?
EDIT:
I found this, which successfully imports my own styles into app.android.css and app.ios.css files. BUT.. After I've installed SASS and done this the app is just completely blank when I run it in the emulator, both in android and ios.
I get no errors, nothing. Has anyone successfully been able to get sass working like this? Please let me know how and thou shalt be rewarded.
EDIT 2:
It looks like the app is running, because I can successfully log something in the app.component.ts's constructor, so I'm guessing that something is causing all the elements on the page to disappear with the new styles settings.
I found this guide: https://docs.nativescript.org/ui/theme#sass-usage
Which is the correct way to go about this. This will create a scss/css file for android and ios as well as creating an _app-common.scss file which you can use to import your own custom styles into. This will then be applied to the android and ios css.
Strangely enough the component scss works without installing sass like above. But after installing sass you can no longer reference the scss file in the styleUrls property of a component, it should now instead link to the css file. Why this is I haven't been able to figure out, but I guess it's not a big deal since it at least works.
The answer provided by #tay hua is incorrect, as it refers to the angular-cli rather than the nativescript-cli, so if you're like me and got stuck on this, this is the answer you should be looking at.
I am trying to set up the conjunction of Atom editor, Sass, Typescript and Aurelia. This question is about Aurelia (installed via aurelia-cli) and its building system, I guess.
Well, I wrote style.sass for my component, then I required it in the component's view (app.html, for instance) as style.css. Fine, it works. But the content of compiled style.css gets included in index.html as internal styles, I mean everything goes inside <style>-tag, not through <link>. Also it seems that the corresponding .css file is never created at all. The stream just includes its content right in <style>-tag inside index.html.
How could I make Aurelia include my styles as external styles via <link>? In building task the last action is a build-plugin coming from aurelia-cli which is kinda black-box for me. Also aurelia.json is imported, so there should be a way to configure the needed behavior. A quick search didn't give me the answer, so here I am.
This is probably not the best solution, and not completely what you want, but perhaps it helps. You can do the following (I took a new TypeScript project):
First remove the css includes from your views.
Then, adjust the ./aurelia_project/tasks/process-css.ts task as follows:
import * as gulp from 'gulp';
import * as sourcemaps from 'gulp-sourcemaps';
import * as sass from 'gulp-sass';
import * as project from '../aurelia.json';
import {build} from 'aurelia-cli';
export default function processCSS() {
return gulp.src(project.cssProcessor.source)
.pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest(project.platform.output));
};
This will output CSS files in the ./scripts folder. Then, adjust the aurelia_project/aurelia.json file as follows (remove css):
{
"name": "app-bundle.js",
"source": [
"[**/*.js]",
"**/*.{html}"
]
},
In your index.html you can now include the generated styles (or even in your components views).