How can I import scss into my Vue components?

Question

I am trying to import my app.scss into my application.vue but I keep getting the error that the alias sass is not recognized. I looked online on how to add the alias to my mix file and I have the following webpack.mix.js. In my vue component I have the following code

<style lang="scss">
    @import 'sass/app.scss';
    html, body{
        margin: 0px;
        padding: 0px;
        background-color: $secondary-color;
    }
</style>

And in my webpack.mix.js

const mix = require('laravel-mix');

mix.webpackConfig({
   resolve: {
      alias: {
         '@': path.resolve(__dirname,'/resources/js'),
         'sass': path.resolve(__dirname, '/resources/assets/sass')
      },
   },
});

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css');

I tried changing the alias to ~ but that did not work. What am I doing wrong here?

Hoover

Does this answer your question? How do I add a global scss file in Vue.JS that will compile? – Soult

It didn't work for me. I stored the scss in assets/scss/mixi.scss. In my <style lang="scss" scoped>I have @import "./assets/scss/mixin";. When calling yarn serveI get the error Syntax Error: SassError: Can't find stylesheet to import showing the path @import "./assets/scss/mixin";. I'm using vue cli. – Famous

Answer 1

Just simply import the scss file in your selected component in the following way. It works for me. I hope it will help you

<style lang="scss" scoped>
  @import "./path/app.scss"; //Here i add extra "./"(current directory)
</style>

Caryophyllaceous

I needed to omit .scss in the filename for import to work – Sora

Answer 2

I've used 2 separate approaches.

1. Use style-resources-loader.

In your vue.config.js:

{
  //...
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'scss',
      patterns: [resolve(__dirname, 'src/path/to/css/*.scss')],
    },
  },
  //...
}

2. Import the scss files in your main.js file, which just looks something like: import './styles/path/to/file/app.scss'; as a js import at the top of the file.

Both of these approaches will effectively use your scss file globally without importing in each individual component.

Nellienellir