Extend the src field so that it can take multiple directory locations

Hi, I have an issue where I have created an express.js web application. I have also installed the material-components-web package using npm install. NPM installed that under node_modules. With the express project setup there is also a local public/stylesheet folder where the project’s sass files are located.

In my app.js I have some lines of code as follows:

app.use(sassMiddleware({
  src: path.join(__dirname, 'public'),
  dest: path.join(__dirname, 'public'),
  indentedSyntax: true, // true = .sass and false = .scss
  sourceMap: true
}));

I would like to set the src field so that it can take an array of strings which represent all the folders where node-sass should look for to pick up the required sass files. At the moment, only one can be specified ie public in the example above. What this means is that I cannot do

@import @material/buttons/mdc-button

I keep getting errors saying that it cannot find the sass files for mdc-button:

GET / 304 424.401 ms - -
[sass]  error: File to import not found or unreadable: @material/button/mdc-button.

Looking at your source code it seems that src can only take a string and not an array of strings:

import * as sass from "node-sass";
import * as express from "express";

interface Options extends sass.Options {
    /**
     * 
     */
    src: string;
    /**
     * 
     */

Does string contain a comma separated values of paths ie “public,node_modules” or is just a single path value ie “public”. From my experiments, it seems the latter.

I hoped that made sense. I am not really a frontend developer so I maybe approaching this incorrectly.

[am11]

@co-category, if you set debug: true, it will show where it is trying to locate the source file and failing.

By the looks of it, src: path.join(__dirname, 'public'), was changed to src: __dirname, (for some reason?), which might explain.

If it does not help, please provide an SSCCE. In this case, a zip file (or git-gist or a script file), resulting in the structure of your project (location of sass, css files), how to run, how to use it, what is the actual behavior and the expected behavior.

[mikail-khan]

@am11 got it working now after your hint, correct code should have been:

app.use(sassMiddleware({
  src: path.join(__dirname, 'public'),
  includePaths: ['public', 'node_modules'],
  dest: path.join(__dirname, 'public'),
  indentedSyntax: true, // true = .sass and false = .scss
  sourceMap: true
}));

Thank you 👍