Build error related to "@import" of styles

[morgan-tr]

I'm importing an SCSS file with shared styles in some of my Vue components:

<style lang="scss">
    @import '@/styles/styles.scss';
</style>

Running the dev server works fine with the above lines, but the production build fails with the following error:

Module build failed: ReferenceError: document is not defined

I tried commenting out the following lines in build/utils.js:

if (options.extract) {
    return ExtractTextPlugin.extract({
    use: loaders,
    fallback: 'vue-style-loader'
    })
} else {
    return ['vue-style-loader'].concat(loaders)
}

This led to a different error:

Unexpected character '@' (110:0)
You may need an appropriate loader to handle this file type.
@import '@/styles/styles.scss';

The only change I've made to the original build file is adding @babel/polyfill in the Webpack entry configuration:

entry: {
    app: ['@babel/polyfill', './src/main.js']
},

However, I read on Babel's website that @babel/polyfill has been deprecated, so I changed it to:

entry: {
    app: ['core-js/stable', 'regenerator-runtime/runtime', './src/main.js']
}

Any idea how to fix the production build?

[morgan-tr]

I was able to resolve the issue by adding the following rule to webpack.base.conf.js:

module: {
    rules: [
        {
            test: /\.scss$/,
            use: [
                'vue-style-loader',
                'css-loader',
                {
                    loader: 'sass-loader',
                }
            ]
        }
        ...
    ],
}