VUE CLI with webpack 4 does not support chainWebpack properly

Version

3.0.0-beta.10

Reproduction link

https://github.com/LanFeusT23/vue-cli-webpack-issue

Steps to reproduce

vue create project Add a vue.config.js file and tap into some loader options

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('scss')
      .use('sass-loader')
      .tap(options =>
        merge(options, {
          includePaths: [path.resolve(__dirname, 'node_modules')],
        })
      )
  }
}

npm run serve

It will throw an error when trying to tap into the loader options

What is expected?

The options should be a an object with many more properties.

What is actually happening?

the options object only has the following properties: { compilerOpitons: { preserveWhitespace: false } }

options.loaders.scss throws an exception because options doesn’t have any other properties added.

---

This worked fine until webpack 4 was released.

[yyx990803]

https://github.com/vuejs/vue-cli/blob/dev/docs/config.md

[andriytyurnikov]

@yyx990803 , thanks a lot for your answer. While exploring various cli starter kits, I’ve encountered multiple challenges with the use of sass libraries. I wonder if there any reason why loading SASS and LESS dependencies from node_modules is not a default behavior?

As my primary scenario with those is to stand on shoulders of giants (sass libraries and frameworks), it looks like people optimize starter kits for other scenarios.

Is such default evil in some way?

BTW, for those who seek copy-paste solution:

//vue.config.js
const path = require('path')

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        includePaths: [path.resolve(__dirname, 'node_modules')]
      }
    }
  }
}