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.
