Do I need to compile my .scss file to .css in my Vite project? Will it wont work if I just use the .scss extension
everything seems to work fine without the need to compile.
It is not necessary to compile .scss files to .css in a Vite project. Vite includes built-in support for Sass, so you can use the .scss extension in your project and Vite will automatically compile it to CSS for you. This means you do not need to use a separate tool to compile your Sass files, and you can use them directly in your project without any additional steps.
Related
I present you this scenario:
I have a React App.
I want to use node-sass
I install the package
I watched a youtube tutorial about sass integration with react.js
I followed the exact instructions (Rename all my .css file to .scss and change all the imports)
I wrote some scss and It's working just fine.
BUT I HAVE NO .CSS FILE TO COMPLILE MY .SCSS and it's working. So is this ok? I just rename all my files and start writing scss and it seems like the browser is compiling scss.
Am I doing something wrong?
I have created a sass project but I don't know how to deploy it before I deploy some other project into Heroku but in cases of sass I am so confused how to deploy it on production?
sass compiled at the end into CSS so could deploy directly HTML ,CSS and JavaScript part???
If we deploy sass into production so what will the build pack for sass?
I have no idea about it please help me for this.
The Sass file has to be compiled into a CSS file because browsers only recognize CSS for styling. If you're using VSCode, simply install the Sass compiler extension, click 'Watch Sass' and it will compile your Sass file into CSS every time there is a change made. Make sure to link the CSS file to the HTML file.
I am a bit confused with using SASS/SCSS in a react typescript project. I found an article saying how SASS/SCSS can be used in react project: https://create-react-app.dev/docs/adding-a-sass-stylesheet
Although it seems importing .scss files in .tsx component files works perfectly fine, like this:
import './component-1.scss';
but then what about building the scss files and compiling them to css? why do we need that if a browser can understand the scss files. or am I understanding wrong here?
if compiling scss files are necessary and we should import compiled css files in the component like:
import './component-1.css';
then how will I achieve this prior to compile because there will only be scss files present in the directory.
The browser doesn't understand SCSS. When your application is built, the SCSS is converted to CSS. Those SCSS file imports basically get transpiled into your application to importing regular old CSS, which the browser then uses.
The code in your source files is not indicative of what the output of your build process looks like. In the same way that we can write our React files using JSX, but that's converted into regular old JS when we build the app, because the browser doesn't understand JSX.
The practice is that we use CSS preprocessors like SASS or LESS to ease the development process. browsers do not understand them. we have two ways to compile them into CSS files:
Using task runners like Gulp and Grunt or bundlers like Webpack(with proper loaders).
Compile them by hand using software like Koala(not recommended in development process)
if you are using Webpack or other bundlers, all you have to do is to import sass files, add proper loader(sass-loader in case of Webpack), and let Webpack do the rest for you. Webpack will take care of compiling and bundling.
I'm very new to scss and css so please bear with me. I've done some research but found conflicting information.
I have 2 freelancers working on my project. Both freelancers make changes to:
style.css
style.css.map
style.scss
Everytime I merge their work I break the frontend. How can I merge their work without breaking everything?
I read online that these files should not be included in GIT? I also read that I should used GULP or LESS? Apparently, I should compile the merged code before committing? Seriously confused with the research.
How do I handle these files?
The .css file is generated from the .scss files.
Your developers should commit only in the .scss files.
In the most cases the .css file is not added to the repository at all. And you should not modify the .css file directly because it will be replaced with the next compilation of .scss the files.
GULP is just the tool that compiles the .scss files and create the css from them. Basically when using GULP you can create some functions where you can specify the input location(.scss), output location(.css) and additional rules, etc.
There are also other tools that can do this. Like Koala, Webpack.
You probably should not store generated files in git. In this case, the generated files would be the .css and .css.map files that compass (I'm assuming you use compass because of the tags) generates for you. You should store the .scss file in source control, and compile it to .css afterwards.
If the freelancers are making direct manual changes to the .css files, they should know that at each recompile those changes will be lost.
Am new to SASS and am trying to change css files to scss in my existing project. I understand that changing the extension to .scss will do for my custom files but am unsure about how to proceed with the dependency style files. I use npm to install my dependencies and some of them do not come with .scss files. What is the correct approach to follow?
You don't need to change the dependencies to SCSS. Just import the CSS files as they are and they'll work!
Think of SCSS as just an extension of CSS rather than something totally different!