Build error related to "@import" of styles
morgan-tr opened this issue · comments
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?
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',
}
]
}
...
],
}