8

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?

2
  • Does this answer your question? How do I add a global scss file in Vue.JS that will compile?
    – 4givN
    Commented Dec 25, 2020 at 0:11
  • 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.
    – chmike
    Commented Aug 2, 2021 at 11:21

2 Answers 2

6

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>
1
  • I needed to omit .scss in the filename for import to work
    – Pui Ho Lam
    Commented Feb 8, 2023 at 20:49
1

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')],
    },
  },
  //...
}
  1. 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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.