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.
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.
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.
I'm trying to auto-refresh my page when I make changes with broswer-sync and gulp.
So far I have it working with my html but I can't seem to figure it out with my css code too.
I have this line of code in my gulpfile.js that works quite well with ONLY html.
gulp.watch("*.html").on("change", reload);
Any help? Thanks! I've also tried putting *.css into the .watch() function and had no luck. I also have a folder with my css in it named "css".
Found the solution!
You cannot see changes with javascript nor CSS. If you want that you'll need to do a live server following https://www.npmjs.com/package/gulp-live-server
EDIT
Go download live server in VSCode, you're welcome...
I'm building a React/Laravel app. However, when I tried to style the layout, I found that I cannot edit in public/css/app.css since every time I run the npm run dev command, the changes I've made disappear from the app.css.
Therefore, I created a style.css but I was confused about whether I should put the style.css into the public folder or resources folder. Moreover, after looking at Laravel docs, this link said that I should add a code to webpack.mix.js. So here's what I wrote
.styles('public/css/style.css', 'public/css/all.css');
adding this to the last part of the whole code:
mix.react('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.styles('public/css/style.css', 'public/css/all.css');
After running npm run dev, I refreshed the page and the page is still not showing the changes from style.css.
Here is my repo: https://github.com/kikidesignnet/hotelreviews and my website which I'm editing: http://immense-beach-76879.herokuapp.com/
What am I missing?
Add the all.css file to your main layout.