How to install SASS in a project via npm?

Question

Node.js

Hello. My introduction to node and installing something via the console started with installing Vue via webpack. Everything was easy for a beginner there: installing vue-cli, then npm init webpack-simple, then installing dependencies: npm i. And for dessert, run watcher: npm run dev. Now, when saving in a text editor, the page is automatically updated. That was the end of my acquaintance with node and it was possible to wipe the sweat from my forehead. Today I wanted to try installing only sass, having watched the following command in one video lesson:
npm install sass-loader node-sass style-loader --save-dev
And although the author installed sass after installing vue, but judging by the command, sass is simply put here. I tried and of course sass didn't work. Apparently, it's a matter of dependencies and something else is missing. Tell me, please, what else is needed for the sass-loader to be connected to the project? Before that, I used the Koala program. But I want to slowly go through easy ways and slowly understand node.
So I would like to be able to use sass in the project and have the page update automatically. And there it might go further. I try to do everything step by step and I would not like to delve into the entire internal kitchen of node. Any new information is given with great difficulty. I would just install sass and run npm run dev in a normal empty project - although this is from one video. In another, the author used npm start. And for now, that's all. What is needed for this? Thanks in advance.

Answer 1

Everything is written in the documentation. YouTube is full of videos about webpack 4. An example of installing a loader is shown here https://webpack.js.org/concepts/loaders/#example . An example of installing sass-loader is written directly in npm . To set up a page reload on changes, you need to set up a dev server in webpack. Ready-made configs, if you do not want to delve into, the Internet is full.
Documentation answers all questions 100%. In short, you need to specify in webpack.config.js an entry point (this is the main js file), and an exit point (where to put files after webpack processing). Import loader modules to process each necessary file (initially, webpack can’t do anything), and add them to the config. If necessary, add more plugin modules. And set up a dev server. Run webpack via the command line, or write a new script in package.json, for example:

"scripts": {
    "dev": "webpack-dev-server --mode development --open"
}

And just write npm run dev to run.
An example of setting up loaders, with a description of what each one does, taken from npm:

// webpack.config.js
module.exports = {
    ...
    module: {
        rules: [{
            test: /\.scss$/,
            use: [
                "style-loader", // creates style nodes from JS strings
                "css-loader", // translates CSS into CommonJS
                "sass-loader" // compiles Sass to CSS
            ]
        }]
    }
};

Answer 2

npm i --save-dev gulp-sass