Replace node-sass With dart-sass In vue-cli3 Based Project

April 08, 2019


Related Issues


1. Replace node-sass with dart-sass

1. Uninstall node-sass

npm uninstall node-sass

2. Install dart-sass

npm install --dev sass

2. Update vue.config.js

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      sass: {
        implementation: require("sass"), // This line must in sass option

3. Replace /deep/ with ::v-deep in component

4. Disable stylelint related rule If you use

// stylelint.config.js
module.exports = {
  rules: {
    'selector-pseudo-element-no-unknown': [
        ignorePseudoElements: ['v-deep'],

Stylelint - Loading Config


If you got error in terminal after run npm run serve like below, Try upgrade sass-loader to 7.1.0

Module build failed (from ./node_modules/sass-loader/lib/loader.js):
Error: Cannot find module 'node-sass'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:581:15)
    at Function.Module._load (internal/modules/cjs/loader.js:507:25)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:22:18)
    at Object.sassLoader (/path-of-your-project-directory/node_modules/sass-loader/lib/loader.js:24:22)

Upgrade vue-cli packages if necessary

Profile picture

Written by Priestch who lives and works in Xi'an building useful things. You can follow him on Github