SassError: Can't find stylesheet to import. (not from node_modules) (using mochapack)

Question

Attempting to load SCSS files from the relative path within Vue component fails.

Config details:

Using "mochapack": "^2.1.2",

Using "sass-loader": "^10.2.0",

Using

$  node -v
v14.17.0

webpack.config-test.js:

const nodeExternals = require('webpack-node-externals');
const { VueLoaderPlugin } = require('vue-loader');
const { alias } = require('./webpack.config.js'); // webpack.config.js is our main, this config is for testing.

module.exports = {
    target: 'node', // webpack should compile node compatible code
    externals: [nodeExternals()], // in order to ignore all modules in node_modules folder
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /\.js$/,
                loader: 'babel-loader'
            },
            {
                test: /\.css$/,
                use: [
                    'vue-style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.s[ac]ss$/i,
                use: [
                    {
                        loader: 'vue-style-loader',
                        options: {
                            sourceMap: true,
                            sourceMapContents: false
                        }
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true,
                            sourceMapContents: false
                        }
                    },
                    'resolve-url-loader',
                    'sass-loader',
                ]
            }
        ]
    },
    resolve: {
        alias: {
            ...alias
        },
        extensions: ['.js', '.vue']
    },
    plugins: [
        new VueLoaderPlugin(),
    ]
};

As you can see, attempting to use URL rewriting per webpack recommendation still fails.

Error:

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
    ╷
126 │ @forward "../settings.scss";
    │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^
    ╵

Debugging attempts:

Checked settings.scss for errors, even when the file is empty it still can't find it.

It def has something to do with the relative path, but the plugin that is supposed to resolve that doesn't seem to work. I'm hoping this is just me not using it right. But I followed their instructions.

Answer 1

I had a similar error, turned out there was a space in the name of a parent directory of the project that was causing the settings.scss to not be found. Try removing the whitespace from all parent directories.