How can I use CSS Modules from my main global scss stylesheet? - vue.js

Question

I need to extend the CSS Loader for Nuxt.js so I can use modules within my global .scss files in assets/scss/screen.scss.
This is taken from the Vue.js site.
// webpack.config.js
{
module: {
rules: [
// ... other rules omitted
{
test: /\.css$/,
use: [
'vue-style-loader',
{
loader: 'css-loader',
options: {
// enable CSS Modules
modules: true,
// customize generated class names
localIdentName: '[local]_[hash:base64:8]'
}
}
]
}
]
}
}
Problem is I don't know where to put this in my Nuxt.config.js for what I have tried fails.
If I place here:
build: {
extend(...){
config.module.rules.push({
test: /\.scss$/,
use: [
'vue-style-loader',
{
loader: 'css-loader',
options: {
// enable CSS Modules
modules: true,
// customize generated class names
localIdentName: '[local]--[hash:base64:8]'
}
}
]
});
}
}
It throws
Error: Cannot read property 'forEach' of undefined at at node_modules\#nuxtjs\style-resources\lib\module.js:88:18
I am confused because I am already extending it successfully in my nuxt.config.js to allow for CSS modules INSIDE of each component.
loaders: {
cssModules: {
modules: {
localIdentName: process.env.NODE_ENV === "production"
? "[hash:base64:6]"
: "[local]--[hash:base64:6]"
}
}
},
But I can't call a CSS class as a module from my main 'global' stylesheet. No error, it just can't find it.
/assets/scss/screen.scss
.triangle{
background:red;
}
Can't be linked-to in my Nuxt file as
<div :class="$style.triangle"></div>
Just like it can if I add the CSS directly within my module. I wonder why I can't access CSS Modules this way? But I can if it's directly within a component using
<style module lang="scss"></style>
Am I able to use CSS modules from a main global stylesheet?