import scss file from css file with webpack - css

Question

In my project, I need to combine stylesheets that were written in 2 different preprocessor languages (SASS and Stylus) into one css file.
My naïve approach was to just add stylus-loader with a test for the .styl extension into my webpack config, and #import a stylus file from my app.scss file (which is the entrypoint).
It seems that sass-loader doesn't resolve modules like it happens in JavaScript. I also tried making an entrypoint CSS file with my app.scss and the Stylus file as imports, which also doesn't work.
Is this just a configuration I'm missing or do css-loader and sass-loader just not support this kind of module resolve?
Entry CSS
#import "sass-loader!./app.scss";
#import "stylus-loader!../node_modules/vuetify/src/stylus/main.styl
This will just result in this error:
ERROR in ./node_modules/css-loader??ref--6-1!./css/app.css
Module not found: Error: Can't resolve './sass' in '/Users/tux/projects/zenner/platform-base/platform/assets/css'
# ./node_modules/css-loader??ref--6-1!./css/app.css 3:10-95
ERROR in ./node_modules/css-loader??ref--6-1!./css/app.css
Module not found: Error: Can't resolve './stylus' in '/Users/tux/projects/zenner/platform-base/platform/assets/css'
# ./node_modules/css-loader??ref--6-1!./css/app.css 4:10-131

Answer 1

Because none of css-loader, sass-loader or style-loader can load files in other languages (which I think should be possible with a loader chain string like sass-loader!my-file.scss), I instead imported the styles in my index javascript file and used extract-text plugin. This works fine.
webpack.config.js
var ExtractTextPlugin = require("extract-text-webpack-plugin")
const extractCSS = new ExtractTextPlugin('css/styles.css')
{
test: /\.scss$/,
use: extractCSS.extract({use: ["css-loader", "sass-loader"]})
}, {
test: /\.styl$/,
use: extractCSS.extract({use: ["css-loader", 'stylus-loader']})
}
app.js
import "../css/app.scss"
import "vuetify/src/stylus/main.styl"