How to use sass in VUE application?

Question

I am developing my first application in VUE I have created a styles file at the root of the project and another with the fonts I want to use globally. I'm trying to modify the styles of the components to be able to declare "" and thus be able to use these styles globally. Following the official documentation and articles on the subject I do not see the solution to a bug that launches the console

"ERROR in ./node_modules/css-loader?sourceMap!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-7ba5bd90","scoped":false,"hasInlineConfig":false}!./node_modules/sass-loader/dist/cjs.js!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue"

here is my vue.config.js

module.exports = {
    css: {
        loaderOptions: {
            sass: {
                prependData: `@import "@/styles/_variables.scss";`
            }
        }
    },
}

and here my webpack.config.js

var path = require('path')
var webpack = require('webpack')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader',
          {
            loader: 'sass-loader',
            options: {
              prependData:
              `@import "@/styles/_variables.scss";`
            }
          }
        ],
      }, 
      {
        test: /\.scss$/,
        use: [
          'vue-style-loader',
          'css-loader',
          {
            loader: 'sass-loader',
            options: {
              // prependData:
              // `@import "@/styles/_variables.scss";`
              resources: [
                path.resolve(__dirname, '../src/styles/_variables.scss')
              ]
            }
          }
        ],
      },       
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
          }
          // other vue-loader options go here
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    },
    extensions: ['*', '.js', '.vue', '.json']
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true,
    overlay: true
  },
  performance: {
    hints: false
  },
  devtool: '#eval-source-map'
}

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}

and here my App.vue

<template>
  <div id="app">

    <div class="container">
      <ciev-app-header />
      <router-view></router-view>
      <hr>
      <ciev-app-footer></ciev-app-footer>
    </div>
  </div>
</template>

<script>
import Header from './components/Shared/Header';
import Footer from './components/Shared/Footer.vue';

export default {
    name: 'app',
    components:{
      'ciev-app-header': Header,
      'ciev-app-footer': Footer
    },
    created () {
      this.$store.dispatch('tryAutoLogin')
    }
}
</script>


<style lang="scss">

@font-face {
    font-family: 'RalewayRegular';
    src: local('RalewayRegular'),
    url(./fonts/Raleway-Regular.ttf) format('truetype');
    font-style: normal;
}

  body, html {
    margin: 0;
    font-family: 'RalewayRegular', sans-serif;
  }
</style>

Someone who can tell me what I'm doing wrong. Thank you in advance for your time and help.

my package.json

{
  "name": "vue-cli",
  "description": "A Vue.js project",
  "version": "1.0.0",
  "author": "Miguel Alvarez Gomez <[email protected]>",
  "license": "MIT",
  "private": true,
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },
  "dependencies": {
    "axios": "^0.19.2",
    "style-resources-loader": "^1.3.3",
    "vue": "^2.5.11",
    "vue-router": "^3.3.4",
    "vuex": "^3.5.1"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ],
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.0",
    "babel-preset-stage-3": "^6.24.1",
    "cross-env": "^5.0.5",
    "css-loader": "^0.28.7",
    "file-loader": "^1.1.4",
    "node-sass": "^4.14.1",
    "sass-loader": "^9.0.3",
    "vue-loader": "^13.0.5",
    "vue-template-compiler": "^2.4.4",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.9.1"
  }
}

It doesn't look like you're actually using a Vue CLI project (based on your package.json). I highly recommend using Vue CLI to generate your project. Then, enabling Sass would be as simple as installing node-sass and sass-loader, and then using <style lang="scss"> in your SFCs. — tony19

onuriltan onuriltan · Accepted Answer · 2020-08-07T08:16:37

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']
}

How to use sass in VUE application?

2 Answers