0

I've been searching and found some issues and implementations that seems to be deprecated, though I'm not sure (as I tried to implement them and failed).

If it still not clear, what I want to achieve is a command line like so:

Straight in command line or npm scripts, we'd use something like this:

node-sass --config sassconfig.json

In sassconfig.json, we'd have a code like the one below:

{
  "outputStyle": "compressed",
  "sourceMap": true
}

This setup would make it more elegant and straightforward, just like tsconfig.json.

1 Answers1

0

Normally you dont render Sass manually with a npm command. Integrate Sass in your webserver and render it when the server starts and your watcher programm recognize changes in the code (nodemon, Webpack hot module, etc.)

Here is an example for an expressJs server:

https://stackoverflow.com/a/26277894/6564085

Let me quote swervos' answer from the link to save the snippet in this answer: 

    var connect = require('connect');
var sass = require('node-sass');

var srcPath = __dirname + '/sass';
var destPath = __dirname + '/public/styles';

var server = connect.createServer(
    sass.middleware({
        src: srcPath,
        dest: destPath,
        debug: true,
        outputStyle: 'expanded',
        prefix: '/styles'
    }),
    connect.static(__dirname + '/public')
);

If you want to use Webpack heres a webpack version:

https://stackoverflow.com/a/46059484/6564085

let me quote Arnelle Balane's for it.

{
    test: /.scss$/,
    use: ExtractTextPlugin.extract({
        fallbackLoader: "style-loader",
        use: [{
            loader: 'css-loader'
        }, {
            loader: 'sass-loader',
            options: {
                outputStyle: 'expanded'
            }
        }]
    })
}

More information here: https://www.npmjs.com/package/sass-loader

phng
  • 344
  • 3
  • 12
  • Why wouldn't you use npm for rendering Sass? –  Dec 03 '18 at 19:45
  • Like I said. Your server setup should render Sass. When you have a NodeJs server you will have different scripts. One script for the development mode with hot reloads when you edit your frontend and this process will also render Sass. And the production mode if you want to release the current website status. Complex servers have more stuff to render than Sass. For example pug files, typescript, vue, etc. You shouldnt render them manually with single npm commands. – phng Dec 03 '18 at 20:59
  • So, you are not talking about task runners like Grunt, right? –  Dec 04 '18 at 05:55
  • Check this node server out and you will see what I mean: https://github.com/ihadeed/express-super-starter?files=1 – phng Dec 04 '18 at 06:53