vue-cli: Sass-loader 8.0.0 not working with Vue-cli 3

CLI v3 works with sass-loader v7 only at the moment. You can downgrade it for now.

With CLI v4 + sass-loader v8 it’s prependData.

CLI v3 works with sass-loader v7 only at the moment. You can downgrade it for now.

With CLI v4 + sass-loader v8 it’s prependData.

Just wanted to mention:

I’m using CLI v3.11.0, Node v12.10.0 and sass-loader v8.0.0 and it’s working without any issues in my project with the config from the new rc docs.

module.exports = {
  css: {
    loaderOptions: {
      scss: {
        prependData: `
          @import "~@/scss/_variables.scss";
          @import "~@/scss/_mixins.scss";
        `
      }
    }
  }
};

Note: the ~ is not needed?

Should be replaced prependData with additionalData.

This is how it works:

module.exports = { css: { loaderOptions: { scss: { additionalData : @import "@/assets/styles/styles.scss"; }, }, } };

It doesn’t work like that: module.exports = { css: { loaderOptions: { scss: { prependData : @import "@/assets/styles/styles.scss"; }, }, } };

prependData works for me with sass-loader v8. Please provide a valid reproduction.

@pdoria, well as I said it works (my sass-loader is v7.3.1) but that not’s the point. The vue-cli release notes, and that prominent yellow warning, say to update sass-loader to v8.

опять трансгендерные олени-смузихлебы на самокатах все сломали

I’m just a simple regular user of vue-cli. I updated my project today to 4.0.1 but I get a yellow warning on npm run serve saying “A new version of sass-loader is available. Please upgrade for best experience.” So I upgrade sass-loader@7.3.1->8.0.0 but then I get crashes same as @pdoria above.

I added that css stanza to my vue-config.js but it does not fix the problem.

This bug should be re-opened and the title changed to Vue-cli 4.

Here’s a definitive solution to those who have run into this problem:

• upgrade your Vue CLI to 4.0+:

npm update -g @vue/cli
# OR
yarn global upgrade --latest @vue/cli

• upgrade your sass-loader to 8.0+

npm update sass-loader
# OR
yarn upgrade --latest sass-loader

• update your vue.config.js file

module.exports = {
  css: {
    loaderOptions: {
      // old
      sass: {
        data: `@import "@/styles/_global.scss";`,
      },
      // new
      sass: {
        prependData: `@import "@/styles/_global.sass"`, // change to *.sass; remove semi-colon
      }, 
      scss: { // separate one for scss
        prependData: `@import "@/styles/_global.scss"`, // this is .scss
      }, 
    },
  },
  // ...
}

• remove /deep/ selector if you have any. Apparently it’s deprecated. Luckily I could do this without too much trouble.

if you use material or something else which uses sass down in the modules you have to add one line to the above :

module.exports = { lintOnSave: false, css: { loaderOptions: { sass: { prependData: @import '@/assets/sass/_theme.scss';, sassOptions: { includePaths: [path.resolve(__dirname, “node_modules”)] } } } } };

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        prependData: ` @import '@/assets/sass/_theme.scss';`
      }
    }
  },
}

This works for me… just put ; at the end of the file path

https://next.cli.vuejs.org/guide/css.html#passing-options-to-pre-processor-loaders

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        prependData: ` @import '@/assets/sass/_theme.scss';`
      }
    }
  },
}

This works for me… just put ; at the end of the file path

where exactly do you place those codes

@kagz Place it in vue.config.js

Getting the same error when using sass-loader 8 with vuetilfy and electron

  ERROR in ./node_modules/vuetify/src/components/VDataTable/VDataTable.sass (./node_modules/css-loader!./node_modules/sass-loader/dist/cjs.js?indentedSyntax!./node_modules/vuetify/src/components/VDataTable/VDataTable.sass)
  Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
  ValidationError: Invalid options object. Sass Loader has been initialised using an options object that does not match the API schema.
   - options has an unknown property 'indentedSyntax'. These properties are valid:
     object { implementation?, sassOptions?, prependData?, sourceMap?, webpackImporter? }
      at validate (/Users/varun/Documents/GitHub/gym-management/node_modules/sass-loader/node_modules/schema-utils/dist/validate.js:50:11)
      at Object.loader (/Users/varun/Documents/GitHub/gym-management/node_modules/sass-loader/dist/index.js:36:28)
   @ ./node_modules/vuetify/src/components/VDataTable/VDataTable.sass 4:14-127 14:3-18:5 15:22-135
   @ ./node_modules/vuetify/lib/components/VDataTable/VDataTable.js
   @ ./node_modules/vuetify/lib/components/VDataTable/index.js
   @ ./node_modules/vuetify/lib/components/index.js
   @ ./node_modules/vuetify/lib/index.js
   @ ./src/renderer/plugins/vuetify.js
   @ ./src/renderer/main.js
   @ multi ./.electron-vue/dev-client ./src/renderer/main.js

I updated now everything, my global vue cli (don’t know whether it is needed or not) and the sass-loader to 8.0.0. Now I got this error:

Failed to compile.

./node_modules/vuetify/src/components/VAlert/VAlert.sass (./node_modules/css-loader/dist/cjs.js??ref--9-oneOf-3-1!./node_modules/postcss-loader/src??ref--9-oneOf-3-2!./node_modules/sass-loader/dist/cjs.js??ref--9-oneOf-3-3!./node_modules/vuetify/src/components/VAlert/VAlert.sass)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: semicolons aren't allowed in the indented syntax.
  ╷
1 │ @import '~@/assets/base.scss';
  │                              ^
  ╵
  C:\Projekte\urania\node_modules\vuetify\src\components\VAlert\VAlert.sass 1:30  root stylesheet

So this is now the problem with mixed sass and scss, but first I installed sass-loader and second I already used the loaderOptions scss, and not sass.

I already commented here, couple of days ago: https://github.com/vuejs/vue-cli/issues/4116

Duplicate of https://github.com/vuejs/vue-cli/issues/4513 (kinda)