vue-cli not building when choosing dart-sass

[nwpappas]

Version

3.5.1

Environment info

Environment Info:

  System:
    OS: macOS 10.14.3
    CPU: (8) x64 Intel(R) Core(TM) i7-4960HQ CPU @ 2.60GHz
  Binaries:
    Node: 11.11.0 - /usr/local/bin/node
    Yarn: Not Found
    npm: 6.7.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 72.0.3626.121
    Firefox: 63.0.1
    Safari: 12.0.3
  npmGlobalPackages:
    @vue/cli: 3.5.1

Steps to reproduce

Create a new vue app via vue-cli, selecting 'dart-sass' as preprocessor.

What is expected?

A vue.config.js file should be created to properly 'require' the sass install.

What is actually happening?

No vue.config.js is created. Attempting to build or serve fails, as discovered in #3623.

---

Adding the following file to the project solves the problem:

/* vue.config.js */
module.exports = {
  css: {
    loaderOptions: {
      sass: {
        implementation: require('sass')
      }
    }
  }
}

[LinusBorg]

That should of course not be solved in the vue config js file but in the internal config.

[nwpappas]

Hi @LinusBorg,

Is your comment a direction to me for solving the issue outside 'vue.config.js', or a general comment on the thread?

If not obvious, I just stumbled across this and the solution I posted. If I should be doing something different, I kind of need to be hit over the head with a blunt object to get it.

[LinusBorg]

I'm saying if the behaviour is as you describe in that other issue that you closed (why?), then it's a bug we should solve internally, not something we should add to vue.config.js

[nwpappas]

Apologies muddying the waters by closing the other and starting this. It seemed to make sense in my head at the time... for whatever reason.

I ran into a few other weird issues while poking around with this.

Playing with the 'vue.config.js' file, I managed to break the build again. Restoring the config file to its previously working state didn't help. Restoring it to just what I have listed above still caused the build to be killed, per the original issue.

So, I tried to create a new project. I selected 'dart-sass' and the default project build failed. I then followed my instructions above (creating a 'vue.config.js'), but the default project build continued to fail.

So, I tried to create another new project. I selected 'node-sass' and was able to build the default project. From the command line I then ran:

• npm install sass --save-dev
• npm uninstall node-sass

I did not create a 'vue.config.js' file, and everything built just fine. I fiddled with a few settings in the GUI, so a config file would be auto generated, and everything continues to build at the moment. My config currently looks like:

module.exports = {
  productionSourceMap: false,
  css: {
    modules: true,
    extract: false
  }
}

[haoqunjiang]

Considering how we implemented the dart sass support: https://github.com/vuejs/vue-cli/pull/3321/files#diff-02dac6ff04bccec85078f259dd2a75ebR18
This issue is not likely related to vue.config.js but more like a fibers issue. Try deleting that dependency? (It's included only for performance boost)