I have used one component file called xyx.js and I imported my scss file properly './xyz.scss' both are in the same folder. When I see the styles from the chrome scss extension it works however when I tried to see it from my scss file it's not working.Can anyone help me to get through this?
your global SASS file should be imported inside the index.js file or else it won't work, and you may have to change the global CSS file into SASS and same import the in-app component.
Related
Im trying to learn sass and JavaScript using VS Code. I created an app folder that holds my js folder which contains my script.js and scss folder that contains my _globals.scss. _header.scss, _variables.scss, and style.scss. I created a dist folder that contains my style.css and style.css.map. I have my html linked to my dist/style.css but I cannot get any of my pages to connect to my html page. I have the #import variables, globals, and header set in my style.scss page but the only styles I can add to my webpage is from the html document itself.
I’ve tried very little because I’m new to web development. Working from a MacBook, I downloaded homebrew, git, and a couple other apps I saw on YouTube. I tried changing my #imports to #use and adding them directly to the style.css but that did not help.
I was expecting by downloading any of those files would get my pages to communicate with each other.
Are you trying to import the .scss files on your styles.css? If so, this is not the right way to work with sass.
To be able to "transform" the .scss files into .css, you have to compile these files using the CLI (command-line/terminal).
This video shows how to do this procedure.
It the above is not the case, could you please send us screenshots of what you're trying to do, it will be really helpful to help you to fix this issue.
Create a new file in CSS(type),
then link that file using the <link> tag in your HTML page using the address of the newly created .css file.
I have no prior experience of scss and I am using a Portfolio Template for my portfolio website.
I added one more section to the website. If I am defining a style in any _file.scss file which was present priorly, it is working fine but when I create a new _filename.scss file for it. It is not detecting the style from that file.
Do I need to configure something before running npm start or npm install.
I think you have to Import the file in your main scss file.
ex.:
given:
_filename.scss
usage in the main scss file:
#import "filename";
Remember***
Dont write the underscore in there, the underscore means, that it is a (scss) file that is going to be imported.
In one of my css files there is this entry
#import url('bootstrap.min.css');
What does this do, does it get it from the internet or local pc.
if you use import rule in your css file , in fact you export all things in bootstrap file in you own css file. just this.
read this article : https://www.w3schools.com/cssref/pr_import_rule.asp
Importing css means to import the file of css from inside the directory or project.
e.g. in REACTJS we don't provide the link of our css file inside our view file, we only import it. And its not only in CSS case, it also occurs in various other files like JS or image etc.
I am new to SCSS. I am working on a python web application. I have an issue that the changes in SCSS are not reflected. Only the changes in CSS file are reflected.
I checked online and created a mapping file:
{"version":3,"sourceRoot":"","sources":["index.scss"],"names":[],"mappings":"AACE;EACE","file":"index.css"}
I still very confused. Do I need to run some command to map the SCSS to css whenever I change the scss file? If yes, what command should I run?
Thanks!
You need to make sure your workflow compiles the scss files to css everytime you start your application.
I have a application which uses app.css in index.html. This app.css is the output css file from multiple SCSS files.
While inspecting an element to find css of that element, how can I know from which SCSS file is that style from?
You can use SASS Source Mapping. This will let you display the exact .scss file in your browser inspector.
Adding a flag to Sass's command line tool:
$ sass sass/screen.scss:stylesheets/screen.css --sourcemap
If you look in your output folder after running that command, you'll notice that a comment has been added to the end of the generated CSS file:
/*# sourceMappingURL=screen.css.map */
Hope this helps!
As you've shown no code, i'll assume... you're using compass to compile? In this case you can use the ruby to sourcemap your files for you.
This can be done like so:
# Enable CSS source maps for development
sourcemap = true
This can be added to your rubyfile.
If you're using gulp or grunt you can use:
https://www.npmjs.com/package/grunt-concat-sourcemap
or
https://www.npmjs.com/package/gulp-concat-sourcemap
or if you're using sass:
http://thesassway.com/intermediate/using-source-maps-with-sass