How to use sass in VUE application?
You can use
style-resources-loader
plugin like this in vue.config.js
file
vue.config.js
const path = require('path');
module.exports = {
...
pluginOptions: {
'style-resources-loader': {
preProcessor: 'scss',
// load which style file you want to import globally
patterns: [path.resolve(__dirname, './src/styles/_variables.scss')],
},
}
};
Edit: if this doesn't work, add this to your webpack.config module.rules array. It will tell webpack to use sass loader for your .scss
files
{
test: /\/.scss$/,
loaders: ['style', 'css', 'sass']
}
After a lot of searching and trying different solutions I have found this article and following it step by step has worked perfect for me. Only by installing the file-loader and adding the highlighted fields in the article to my webpack I have solved the problem.
I leave you the link in case someone is in the same situation.
https://chriscourses.com/blog/loading-fonts-webpack
Thank you for your help.