Nuxt.js: Scss using custom alias failed

[BarryZhan]

There is no problem with using the default alias in scss, but using a custom alias error,It is normal to use this alias in the script.

extend (config) {
        config.resolve.alias['~mixin'] = path.resolve(__dirname, './assets/style/helpers/mixin.scss')
}

Module build failed: 
    @import "~mixin";
^
      File to import not found or unreadable: ~mixin.

_{This question is available on Nuxt.js community (#c357)}

[Atinux]

This should fix your problem (I tested it):

nuxt.config.js:

config.resolve.alias['mixin'] = path.resolve(__dirname, './assets/style/helpers/mixin.scss')

Then in your pages component:

@import '~mixin'

[ausir0726]

@Atinux Can I ask why we can't use '~mixin' with alias ?
but we can use '~assets' or '~store' ...?

by the way ,
I have another similar question
about when I use eslint-config-airbnb-base
eslint will check import file exist , but nuxt alias will not working .
so I need add resolve in .eslintrc.js

settings: {
    'import/resolver': {
      'webpack': {
        'config': '.eslint.resolve.config.js'
      }
    }
  },

.eslint.resolve.config.js

const { join } = require('path');
function resolve(dir) {
  return join(__dirname, dir);
}
module.exports = {
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      '~': resolve(''),
      static: resolve('static'),
      '~static': resolve('static'),
      assets: resolve('assets'),
      '~assets': resolve('assets'),
      '~plugins': resolve('plugins'),
      '~store': resolve('.nuxt/store'),
      '~router': resolve('.nuxt/router'),
      '~pages': resolve('pages'),
      '~components': resolve('components'),
    },
  },
};

when I use this setting , eslint-config-airbnb-base will working on my project .
I don't know am I doing right ?

[Atinux]

HI @ausir0726

You are doing right with your .eslint.resolve.config.js 👍

For the ~mixin vs mixin, it is because of the style-loader which already use the ~. It's hard to explain but it works like this if it's for CSS!

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.