search

vuejs / vue-cli

🛠️ webpack-based tooling for Vue.js Development
https://cli.vuejs.org/
MIT License
29.76k stars 6.33k forks source link

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

Closed Goldziher closed 5 years ago

Goldziher commented 5 years ago

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 commented 5 years ago

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

jacekkarczmarczyk commented 5 years ago

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

haoqunjiang commented 5 years ago

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

mxswat commented 5 years ago

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

ryanjwilke commented 5 years ago

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.

haoqunjiang commented 5 years ago

Supported in 4.0.0-rc.3

Chris2011 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

Does anyone of the commenters solved that problem?

haoqunjiang commented 5 years ago

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

haoqunjiang commented 5 years ago

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 commented 5 years ago

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

Chris2011 commented 5 years ago

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.

haoqunjiang commented 5 years ago

Got it. It's a bug. See https://github.com/vuejs/vue-cli/pull/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 commented 5 years ago

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

haoqunjiang commented 5 years ago

Fixed in rc.7.

cpraas commented 5 years ago

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 commented 5 years ago

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

varunpvp commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

@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 commented 5 years ago 
module.exports = {
  css: {
    loaderOptions: {
      sass: {
        prependData: ` @import '@/assets/sass/_theme.scss';`
      }
    }
  },
}

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

kagz commented 4 years ago 
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

ryanicle commented 4 years ago 
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

erhard commented 4 years ago

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")] } } } } };

jko206 commented 4 years ago

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

JakubHromada commented 4 years ago

@jaiko86 - thanks man, that helped a lot. I had to add semicolon to make the scss work, this is my working config - also with node modules scss files import enabled.

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        sassOptions: {
          includePaths: [
            './node_modules'
          ]
        },
        prependData: `@import "@/styles/global.scss";`,
      },
    },
  },
};
saikiranjamiligiri commented 4 years ago

Hi, Is this working for production build? . I am facing the issue with production as .scss modules are not extracted while building.

sstenn commented 4 years ago

The solution provided by @jaiko86 is not working for me... I'm using "sass-loader": "^8.0.2" with @vue/cli-service v4.3.1

css: {
  loaderOptions: {
    sass: {
      prependData: `@import "@/styles/global.scss";`,
    }
  }
}

I also tried to downgrade sass-loader to 7.3.1, but with no luck

arismamo commented 4 years ago

The solution provided by @jaiko86 is not working for me... I'm using "sass-loader": "^8.0.2" with @vue/cli-service v4.3.1

css: {
  loaderOptions: {
    sass: {
      prependData: `@import "@/styles/global.scss";`,
    }
  }
}

I also tried to downgrade sass-loader to 7.3.1, but with no luck

Hi, i have the same version and it's working using the @jaiko86 configuration, but you should also include sassOptions attribute to load _nodemodule directory just like @JakubHromada example when your scss files are imported from installed components. This is my configuration:

....
css: {
        loaderOptions: {
            sass: {
                sassOptions: {
                    includePaths: [
                        './node_modules'
                    ]
                },
                prependData: `@import "~@/style/sass/main.scss"`
            },
        },
}
.....

where main.scss has imports from _nodemodules path

simeon9696 commented 4 years ago

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

Hey did you find a fix for electron?

AlexeyZelenko commented 4 years ago

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"; }, }, } };

elixian commented 4 years ago

problem solved for me with sass-loader 10.0.4 with additionalData not prependData module.exports ={ css: { loaderOptions: { sass: { additionalData: "@import '@/sass/main.scss';", }, }, }, }

chriso86 commented 3 years ago

I have no idea how this is working for you guys. I have tried every combination to no avail. Semi-colon, no semi-colon. data, additionalData, prependData. sass, scss.

This is how it currently looks and isn't working:

module.exports = {
    pluginOptions: {
        electronBuilder: {
            nodeIntegration: true
        }
    },
    css: {
        loaderOptions: {
            scss: {
                additionalData: `@import "@/theme/components/_tab-view.scss";`
            }
        }
    }
}

These are my dependencies:

"dependencies": {
    "@fortawesome/fontawesome-free": "^5.15.1",
    "core-js": "^3.6.5",
    "nedb": "^1.8.0",
    "path": "^0.12.7",
    "reflect-metadata": "^0.1.13",
    "vue": "^2.6.11",
    "vue-class-component": "^7.2.3",
    "vue-property-decorator": "^8.4.2",
    "vue-router": "^3.2.0",
    "vuex": "^3.4.0",
    "vuex-class": "^0.3.2"
  },
  "devDependencies": {
    "@types/electron-devtools-installer": "^2.2.0",
    "@types/jest": "^24.0.19",
    "@types/nedb": "^1.8.11",
    "@typescript-eslint/eslint-plugin": "^2.33.0",
    "@typescript-eslint/parser": "^2.33.0",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-e2e-cypress": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-typescript": "~4.5.0",
    "@vue/cli-plugin-unit-jest": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/eslint-config-typescript": "^5.0.2",
    "@vue/test-utils": "^1.0.3",
    "electron": "^9.0.0",
    "electron-devtools-installer": "^3.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "node-sass": "^4.12.0",
    "sass-loader": "^8.0.2",
    "typescript": "~3.9.3",
    "vue-cli-plugin-electron-builder": "~2.0.0-rc.5",
    "vue-template-compiler": "^2.6.11",
    "vuex-module-decorators": "^1.0.1"
  }

I tried to just @import the SCSS file into the