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.