概要

vue-loader, sass-loaderを通してnode-sass-asset-functionsを利用する方法です

node-sass-asset-functions

www.npmjs.com

compassで提供されていたimage-urlやimage-widthといった関数をnode-sassで利用できるようにするためのモジュールです

sass-loaderでnode-sass-asset-functionsを利用する

sass-loaderのREADMEのとおり options -> sassOptions -> functions に指定すれば利用できます

rules: [
  {
    use: 'sass-loader',
    options: {
      sassOptions: {
        functions: require('node-sass-asset-functions')
      }
    }
  }
]

vue-loader v14までの落とし穴

vue-loaderを通して利用するとなるとvueのoptions -> loaders -> scssに先ほどと同じようなローダーの設定を書けば動くはず…なんですがv14では実は動きません

rules: [
  {
    use: 'vue-loader',
    options: {
      loaders: {
        scss: [
          { use: 'vue-style-loader' },
          { use: 'css-loader' },
          {
            use: 'sass-loader',
            options: {
              sassOptions: {
                functions: require('node-sass-asset-functions') // これだと動かない
              }
            }
          }
        ]
      }
    }
  }
]

vue-loaderのoptionsで設定したローダーのoptionsはシリアライズ可能なものでなければいけないからです