Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Sass-loader 8.0.0 not working with Vue-cli 3 #4526

Closed
Goldziher opened this issue Aug 31, 2019 · 24 comments

Comments

@Goldziher
Copy link

@Goldziher Goldziher commented Aug 31, 2019

Version

3.11.0

Environment info

Environment Info:

  System:
    OS: macOS 10.14.6
    CPU: (8) x64 Intel(R) Core(TM) i7-7820HQ CPU @ 2.90GHz
  Binaries:
    Node: 12.6.0 - /usr/local/bin/node
    Yarn: 1.17.3 - /usr/local/bin/yarn
    npm: 6.10.3 - /usr/local/bin/npm
  Browsers:
    Chrome: 76.0.3809.132
    Firefox: 68.0.2
    Safari: 12.1.2
  npmPackages:
    @3yourmind/vue-yodify: ^0.2.9 => 0.2.9 
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0 
    @vue/babel-plugin-transform-vue-jsx:  1.0.0 
    @vue/babel-preset-app: ^3.11.0 => 3.11.0 
    @vue/babel-preset-jsx:  1.1.0 
    @vue/babel-sugar-functional-vue:  1.0.0 
    @vue/babel-sugar-inject-h:  1.0.0 
    @vue/babel-sugar-v-model:  1.0.0 
    @vue/babel-sugar-v-on:  1.1.0 
    @vue/cli-overlay:  3.11.0 
    @vue/cli-plugin-babel: ^3.11.0 => 3.11.0 
    @vue/cli-plugin-unit-jest: ^3.11.0 => 3.11.0 
    @vue/cli-service: ^3.11.0 => 3.11.0 
    @vue/cli-shared-utils:  3.11.0 
    @vue/component-compiler-utils:  3.0.0 
    @vue/eslint-config-prettier: ^5.0.0 => 5.0.0 
    @vue/preload-webpack-plugin:  1.1.1 
    @vue/test-utils: ^1.0.0-beta.29 => 1.0.0-beta.29 
    @vue/web-component-wrapper:  1.2.0 
    babel-helper-vue-jsx-merge-props:  2.0.3 
    eslint-plugin-vue: ^5.2.3 => 5.2.3 
    jest-serializer-vue:  2.0.2 
    typescript: ^3.6.2 => 3.6.2 
    vue: ^2.6.10 => 2.6.10 
    vue-autosize: ^1.0.2 => 1.0.2 
    vue-clickaway: ^2.2.2 => 2.2.2 
    vue-cropper: ^0.4.9 => 0.4.9 
    vue-echarts: ^4.0.3 => 4.0.3 
    vue-eslint-parser: ^6.0.4 => 6.0.4 (5.0.0)
    vue-hot-reload-api:  2.3.3 
    vue-i18n: ^8.14.0 => 8.14.0 
    vue-jest:  3.0.4 
    vue-loader:  15.7.1 
    vue-meta: ^2.2.1 => 2.2.1 
    vue-multiselect: ^2.1.6 => 2.1.6 
    vue-popperjs:  2.0.4 
    vue-router: ^3.1.2 => 3.1.2 
    vue-style-loader:  4.1.2 
    vue-template-compiler: ^2.6.10 => 2.6.10 
    vue-template-es2015-compiler:  1.9.1 
    vue2-ace-editor: ^0.0.13 => 0.0.13 
    vuedraggable: ^2.23.0 => 2.23.0 
    vuex: ^3.1.1 => 3.1.1 
    vuex-router-sync: ^5.0.0 => 5.0.0 
  npmGlobalPackages:
    @vue/cli: 3.11.0

Steps to reproduce

Install Sass-loader 8.0.0 and try to configure it to prependData in the vue.config.js - this does not work.

What is expected?

This is working using v7.3.1 of sass-loader

css: {
	loaderOptions: {
		sass: {
			data: "@import '~::shared/assets/variables.scss';",
		},
	},
},

What is actually happening?

This is not working using version 8.0.0:

css: {
	loaderOptions: {
		sass: {
			prependData: "@import '~::shared/assets/variables.scss';",
		},
	},
},

I tried solving this using the chain webpack interface but didn't have much luck.

@Maorey

This comment has been minimized.

Copy link

@Maorey Maorey commented Aug 31, 2019

It's working on vue-cli 4.0.0-rc.0

@jacekkarczmarczyk

This comment has been minimized.

Copy link

@jacekkarczmarczyk jacekkarczmarczyk commented Aug 31, 2019

Duplicate of #4513 (kinda)

@sodatea

This comment has been minimized.

Copy link
Member

@sodatea sodatea commented Sep 2, 2019

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

@mxswat

This comment has been minimized.

Copy link

@mxswat mxswat commented Sep 3, 2019

I can confirm this issue.
sass-loader does not work with version 8.0.0. and vue cli 3.10.0

@ryanjwilke

This comment has been minimized.

Copy link

@ryanjwilke ryanjwilke commented Sep 6, 2019

I get a slightly different error when trying to upgrade to sass-loader 8.0:

11:28:22 AM: ValidationError: Invalid options object. Sass Loader has been initialised using an options object that does not match the API schema.
11:28:22 AM:  - options has an unknown property 'indentedSyntax'. These properties are valid:
11:28:22 AM:    object { implementation?, sassOptions?, prependData?, sourceMap?, webpackImporter? }
11:28:22 AM:     at validate (/opt/build/repo/node_modules/sass-loader/node_modules/schema-utils/dist/validate.js:49:11)
11:28:22 AM:     at Object.loader (/opt/build/repo/node_modules/sass-loader/dist/index.js:36:28)
11:28:22 AM:     at runLoaders (/opt/build/repo/node_modules/webpack/lib/NormalModule.js:313:20)
11:28:22 AM:     at /opt/build/repo/node_modules/loader-runner/lib/LoaderRunner.js:367:11
11:28:22 AM:     at /opt/build/repo/node_modules/loader-runner/lib/LoaderRunner.js:233:18
11:28:22 AM:     at runSyncOrAsync (/opt/build/repo/node_modules/loader-runner/lib/LoaderRunner.js:143:3)
11:28:22 AM:     at iterateNormalLoaders (/opt/build/repo/node_modules/loader-runner/lib/LoaderRunner.js:232:2)
11:28:22 AM:     at Array.<anonymous> (/opt/build/repo/node_modules/loader-runner/lib/LoaderRunner.js:205:4)
11:28:22 AM:     at Storage.finished (/opt/build/repo/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:43:16)
11:28:22 AM:     at provider (/opt/build/repo/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:79:9)
11:28:22 AM:     at /opt/build/repo/node_modules/graceful-fs/graceful-fs.js:115:16
11:28:22 AM:     at FSReqWrap.readFileAfterClose [as oncomplete] (internal/fs/read_file_context.js:53:3)

It looks like it's complaining about this line now in Sass 8.0.

@sodatea

This comment has been minimized.

Copy link
Member

@sodatea sodatea commented Sep 9, 2019

Supported in 4.0.0-rc.3

@sodatea sodatea closed this Sep 9, 2019
@Chris2011

This comment has been minimized.

Copy link

@Chris2011 Chris2011 commented Oct 1, 2019

Still got problems with newest versions of Vuetify and sass-loader:

./node_modules/vuetify/src/components/VInput/VInput.sass (./node_modules/css-loader??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/VInput/VInput.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 (C:\Projekte\urania\node_modules\sass-loader\node_modules\schema-utils\dist\validate.js:50:11)
    at Object.loader (C:\Projekte\urania\node_modules\sass-loader\dist\index.js:36:28)

Here is my pacakge.json file: https://gist.github.com/Chris2011/b4a5f0651f6abb09064a356848624655

First I had m own config part:

css: {
   loaderOptions: {
      scss: {
         data: `@import '@/assets/base.scss';`,
      },
   },
},

But then I got the error with the unknown property data so I commented it out. But now I got this error.

@Chris2011

This comment has been minimized.

Copy link

@Chris2011 Chris2011 commented Oct 1, 2019

For global I use @vue/cli 3.11.0. In my project I also tried @vue/cli-service 4.0.0-rc.6, still no luck. When I switch to rc.6 and I uncomment the css loaderOptions, I got this error:

./node_modules/vuetify/src/components/VSheet/VSheet.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/VSheet/VSheet.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 'data'. These properties are valid:
   object { implementation?, sassOptions?, prependData?, sourceMap?, webpackImporter? }
    at validate (C:\Projekte\urania\node_modules\sass-loader\node_modules\schema-utils\dist\validate.js:50:11)
    at Object.loader (C:\Projekte\urania\node_modules\sass-loader\dist\index.js:36:28)
@Chris2011

This comment has been minimized.

Copy link

@Chris2011 Chris2011 commented Oct 1, 2019

Does anyone of the commenters solved that problem?

@sodatea

This comment has been minimized.

@sodatea

This comment has been minimized.

Copy link
Member

@sodatea sodatea commented Oct 1, 2019

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.

@Chris2011

This comment has been minimized.

Copy link

@Chris2011 Chris2011 commented Oct 1, 2019

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: #4116

@Chris2011

This comment has been minimized.

Copy link

@Chris2011 Chris2011 commented Oct 1, 2019

My case is, I need a newer version of vuetify, before I got the problems, I used 1.5.*, but it has less features so I updated vuetify for that. Just to let you know what I need.

@sodatea

This comment has been minimized.

Copy link
Member

@sodatea sodatea commented Oct 1, 2019

Got it. It's a bug. See #4637 I'll soon release a new version.

Next time, please open a new issue with a runnable reproduction; that will help us locate the problem more quickly.
It's pure luck for me to find the bug by just looking at the error message this time…

@Chris2011

This comment has been minimized.

Copy link

@Chris2011 Chris2011 commented Oct 1, 2019

Ok, thx for your help and sry for the inconvenience :)

@sodatea

This comment has been minimized.

Copy link
Member

@sodatea sodatea commented Oct 1, 2019

Fixed in rc.7.

@Schnitzel128

This comment has been minimized.

Copy link

@Schnitzel128 Schnitzel128 commented Oct 3, 2019

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?

@Chris2011

This comment has been minimized.

Copy link

@Chris2011 Chris2011 commented Oct 3, 2019

@sodatea thx for the fix. It is working now :)

@varunpvp

This comment has been minimized.

Copy link

@varunpvp varunpvp commented Oct 9, 2019

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
@pdoria

This comment has been minimized.

Copy link

@pdoria pdoria commented Oct 16, 2019

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?

Where exactly is this change to be made? Thanks!
btw: using CLI v4.0.1, Node v10.16.0, sass-loader v8.0.0

getting a bunch of this (or similar):

error  in ./node_modules/vuetify/src/components/VColorPicker/VColorPicker.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 'data'. These properties are valid:
   object { implementation?, sassOptions?, prependData?, sourceMap?, webpackImporter? }
    at validate (/home/doria/VSCProjects/Vue-CLI3/todo/node_modules/sass-loader/node_modules/schema-utils/dist/validate.js:50:11)
    at Object.loader (/home/doria/VSCProjects/Vue-CLI3/todo/node_modules/sass-loader/dist/index.js:36:28)

 @ ./node_modules/vuetify/src/components/VColorPicker/VColorPicker.sass 4:14-211 14:3-18:5 15:22-219
 @ ./node_modules/vuetify/lib/components/VColorPicker/VColorPicker.js
 @ ./node_modules/vuetify/lib/components/VColorPicker/index.js
 @ ./node_modules/vuetify/lib/components/index.js
 @ ./node_modules/vuetify/lib/index.js
 @ ./src/plugins/vuetify.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://192.168.1.8:8080/sockjs-node (webpack)/hot/dev-server.js ./src/main.js
@bulletmark

This comment has been minimized.

Copy link

@bulletmark bulletmark commented Oct 16, 2019

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.

@pdoria

This comment has been minimized.

Copy link

@pdoria pdoria commented Oct 16, 2019

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.

don't upgrade! It (vuetify) only works with sass-loader 7.1.0! (just tested it and works with 7.1 ;) )

@bulletmark

This comment has been minimized.

Copy link

@bulletmark bulletmark commented Oct 16, 2019

@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.

@imjohnlouie04

This comment has been minimized.

Copy link

@imjohnlouie04 imjohnlouie04 commented Nov 11, 2019

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

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
You can’t perform that action at this time.