0

For the UI/UX, I am using extension .scss and it should automatically compile into css. Why my .scss is not automatically compiling into a css file?

Improve this question
5
  • you should use node.js comment prompt Commented Nov 5, 2019 at 10:40
  • Because browsers only accept actual CSS. SCSS was made to made to make the cumbersome and repetitive process of writing CSS easier, but browsers do not support it themselves directly. Thats. because SCSS is known as a preprocessor, it processes the code to something the browser actually can use before going live. You should look into using SASS on their website (sass-lang.com/guide) to get started in compiling it properly (or you could use something like Parcel to compile everything at once and get an output you can use directly). Commented Nov 5, 2019 at 10:43
  • are you using any bundler such as webpack? Commented Nov 5, 2019 at 10:43
  • You have to compile it https://stackoverflow.com/questions/52165157/when-to-compile-sass Commented Nov 5, 2019 at 10:44
  • “Why my .scss not automatically compile into css file” - probably because you did not set up the mechanism responsible for that automatic compilation properly …? But your question is missing any useful info so far. Please go read How to Ask, and then give us a detailed description of your setup. Commented Nov 5, 2019 at 10:44

3 Answers 3

Reset to default
1

Browser will not convert .scss file into .css file. We are suppose to convert it and feed. There are many ways to convert it. One of the options is webpack. Please check if you can use it. Webpack comes with css loader, style loader.

Hope it helps.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

This is more of a comment, why is it an answer?
0

Like in the comments, you will need node.js with npm or yarn to update your compiled css file. Maybe if you already have that installed, try something like yarn run dev or npm run dev. Not sure how its exactly written but I think if you search those keywords on internet you will find it out.

EDIT:

Steps you might want to take: Install node.js https://nodejs.org/en/download/ Try in console (while inside your project, in VSC use CTRL + SHIFT + ` to open console) and write something like npm run dev. (this is needed every time you want to update your css. Using npm run watch might also work, this updates everytime you save your css file (same as run dev but now automatic).

Improve this answer

8 Comments

This is a comment, if you do not have the reputation yet to comment, answer some questions, you will gain that 50 rep in no time. In the meanwhile, this is not an answer.
Cant really take over his pc and do it for him. He needs to do it himself. Or give more info.
" $ npm run Scripts available in modern_portfolio via npm run-script: sass node-sass -w scss/ -o dist/css/ --recursive " i think, i already setup node js and when i write in scss file it should compile to css file, because inside the index.html, i link with css/main.css file, what happen is when i start live serve its nothing change
So the changes you make in your scss file (like background-color) do not work at all? If you check your website there is no color changed? You have installed nodejs in your project? By installing the link from above and then write npm install nodes in your console (like said above). You can see in your program that you will have a node_modules directory. Also in your package.json you should then find your npm run dev and else commands (correct me if im wrong). Hope these checks helps!
sass-lang.com/guide this site may also help ^^. Check the sass --watch command.
|
0

Thanks who those spend time to contribute on the question i asked!! Every contribution is my stage to solve the problem

How i solve my problem is, write in terminal "npm run sass". Terminal give output of your "package.json script" and hold it blank until u change anything in sass file and save it.

Terminal will rendering your website, and your change display in browser

Hope this help someone beginner in web dev..

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.