vue-cli: vue-cli and sass-loader@8 incompatibility

Replace data with “prependData”.

I had issue with ‘data’ in sassLoader. Apparently they renamed it to ‘prependData’ and did some changes, so you would have to look into their documentation or read the output. I use Node, not Yarn.

fixed by changing prependData -> additionalData

For the record, we install ^7.0.0 explicitly, so this won’t affect users unless they actively choose to do a major version bump of this dependency.

I’ve got the same problem what’s the solution ? I can’t build Vuetify module in my project …

@jacquesmatthieu have you tried following the description in the OP? If you find problems along the way, ask more specifically.

Or simply use sass-loader v7, which is the version we installed for you initially, and which is the version we support right now.

I’ve got the same problem what’s the solution ? I can’t build Vuetify module in my project …

 error  in ./packages/app/node_modules/vuetify/src/components/VSubheader/VSubheader.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 (myproject/node_modules/sass-loader/node_modules/schema-utils/dist/validate.js:49:11)
    at Object.loader (myproject/node_modules/sass-loader/dist/index.js:36:28)

 @ ./packages/app/node_modules/vuetify/src/components/VSubheader/VSubheader.sass 4:14-272 14:3-18:5 15:22-280
 @ ./packages/app/node_modules/vuetify/lib/components/VSubheader/VSubheader.js
 @ ./packages/app/node_modules/vuetify/lib/components/VSubheader/index.js
 @ ./packages/app/node_modules/vuetify/lib/components/VSelect/VSelectList.js
 @ ./packages/app/node_modules/vuetify/lib/components/VSelect/VSelect.js
 @ ./packages/app/node_modules/vuetify/lib/components/VSelect/index.js
 @ ./packages/app/node_modules/vuetify/lib/components/index.js
 @ ./packages/app/node_modules/vuetify/lib/index.js
 @ ./packages/app/src/main.js
 @ multi (webpack)-dev-server/client?http://172.20.10.2:8080/sockjs-node (webpack)/hot/dev-server.js ./packages/app/src/main.js

@SavkaTaras I can’t share the repo sorry. @LinusBorg I’ve got downgrade to sass-loader and it works. Thx you !

Replace data with “prependData”.

In which file? webpack.config.js?

fix(webpack): correct sass options for sass-loader@8 #6460

But I thought it was merged?

In my case, I had to modify my export in vue.config.js (configureWebpack.css.loaderOptions.scss.data -> configureWebpack.css.loaderOptions.scss.prependData). Here’s the complete file for context:

const PurgecssPlugin = require('purgecss-webpack-plugin');
const glob = require('glob-all');
const path = require('path');

module.exports = {
  assetsDir: 'src/assets',

  chainWebpack: config => {
    config.module
      .rule('vue')
      .use('vue-loader')
      .loader('vue-loader')
      .tap(options => {
        options['transformAssetUrls'] = {
          img: 'src',
          image: 'xlink:href',
          'b-carousel-slide': 'img-src',
          'b-embed': 'src'
        }

        return options
      })
  },

  configureWebpack: {
    plugins: [
      new PurgecssPlugin({
        paths: glob.sync([
          path.join(__dirname, './src/index.html'),
          path.join(__dirname, './**/*.vue'),
          path.join(__dirname, './src/**/*.js')
        ])
      })
    ]
  },

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

  pwa: {
    name: 'Acme',
    themeColor: '#5f4884',
    msTileColor: '#5f4884'
  }
};

You’re absolutely right, but maybe it’s worth to make 4.0 compatible with new sass loader? Since the stable version is not released yet, so it’s the last moment to update it as I guess otherwise we will have to wait for vue-cli 5? Of course this seems to be breaking change which you may not want to add since the RC version is already released

I think the actual actionable issue here is that following these instructions:

https://cli.vuejs.org/guide/css.html#pre-processors

Causes 8.x to be installed.

Downgrading to 7.x works fine for me.

Replace data with “prependData”.

In which file? webpack.config.js?

fix(webpack): correct sass options for sass-loader@8 #6460

But I thought it was merged?

I solved creating the “webpack.config.js” .

module.exports = { module: { rules : [ { test: /\.vue$/, loader: 'vue-loader', options: { loaders: { scss: 'vue-style-loader!css-loader!sass-loader', sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax' }, preLoaders: { js: '/caminho/personalizado/para/carregador' }, postLoaders: { html: 'babel-loader' }, excludedPreLoaders: /(eslint-loader)/ } } ] } }

Same problem here. My output of the log looks the same.

@av1m install sass@1.32.8 (this exact version)

The fix for this is to create a vue.config.js file or use the one already created if you can find it and then fill it with the below. Note that this fix is for folks using the vue cli

css: { loaderOptions: {

   scss: {
 
     prependData: `@import "~@/scss/main.scss";`
   }
 }

}

in your main.scss, import all your mixins and variable files.

If you don’t want to follow this approach, you could make prependData a function, loop through an array of all your ‘@import’ statements and return each of the files out of the for loop block. Like below:

css: { loaderOptions: {

   scss: {

     prependData: ()=>{
       var array = [`@import "~@/scss/main.scss";`, `@import "~@/scss/main.scss";`,
         `@import "~@/scss/main.scss";`,
         `@import "~@/scss/main.scss";`
       
       ]
       for (let index = 0; index < array.length; index++) {
         var element = array[index];
         
       }

       return element;
     }
   }
 }

} you’ll no longer need a single man.scss file

So, according to the migration guide, you’re supposed to “take a look at the v8 release and upgrade to the latest version” but it’s not actually supported… That’s super odd.

It’s supported in 4.0.0-rc.3 and 3.12

running vue serve after vue create fresh:

 ERROR  Failed to compile with 1 errors                                                                                  1:58:44 PM

 error  in ./src/App.vue?vue&type=style&index=0&lang=scss&

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):

    color: #2c3e50;
                  ^
      Expected identifier.
   ╷
26 │     color: #2c3e50;
   │                    ^
   ╵
  stdin 26:20  root stylesheet
      in /Users/oiv/Desktop/fresh/src/App.vue (line 26, column 20)

 @ ./node_modules/vue-style-loader??ref--8-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue-loa
der/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref-
-8-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=style&index=0&lang=scss& 4:14-416 14:3-18:5 15:22-424
 @ ./src/App.vue?vue&type=style&index=0&lang=scss&
 @ ./src/App.vue
 @ ./src/main.ts
 @ multi (webpack)-dev-server/client?http://192.168.0.10:8080/sockjs-node (webpack)/hot/dev-server.js ./src/main.ts

Note: following suggestions for solutions in this repo, I also added fibers and downgraded sass-loader from 8 to 7. But the same build error persists.

package.json:

{
  "name": "fresh",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "core-js": "^3.6.4",
    "phaser": "3.22.0",
    "pug": "^2.0.4",
    "pug-plain-loader": "^1.0.0",
    "register-service-worker": "^1.6.2",
    "vue": "^2.6.11",
    "vue-class-component": "^7.2.2",
    "vue-property-decorator": "^8.3.0",
    "vue-router": "^3.1.5"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.2.0",
    "@vue/cli-plugin-pwa": "~4.2.0",
    "@vue/cli-plugin-router": "~4.2.0",
    "@vue/cli-plugin-typescript": "~4.2.0",
    "@vue/cli-service": "~4.2.0",
    "fibers": "^4.0.2",
    "sass": "^1.25.0",
    "sass-loader": "7.3.1",
    "typescript": "~3.7.5",
    "vue-template-compiler": "^2.6.11",
    "webpack": "^4.36.0"
  }
}

Environment Info:

  System:
    OS: macOS High Sierra 10.13.6
    CPU: (4) x64 Intel(R) Core(TM) i5-4288U CPU @ 2.60GHz
  Binaries:
    Node: 10.16.0 - /usr/local/bin/node
    Yarn: 1.22.0 - /usr/local/bin/yarn
    npm: 6.9.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 79.0.3945.130
    Firefox: 73.0.1
    Safari: 13.0.5
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0 
    @vue/babel-plugin-transform-vue-jsx:  1.1.2 
    @vue/babel-preset-app:  4.2.2 
    @vue/babel-preset-jsx:  1.1.2 
    @vue/babel-sugar-functional-vue:  1.1.2 
    @vue/babel-sugar-inject-h:  1.1.2 
    @vue/babel-sugar-v-model:  1.1.2 
    @vue/babel-sugar-v-on:  1.1.2 
    @vue/cli-overlay:  4.2.2 
    @vue/cli-plugin-babel: ~4.2.0 => 4.2.2 
    @vue/cli-plugin-pwa: ~4.2.0 => 4.2.2 
    @vue/cli-plugin-router: ~4.2.0 => 4.2.2 
    @vue/cli-plugin-typescript: ~4.2.0 => 4.2.2 
    @vue/cli-plugin-vuex:  4.2.2 
    @vue/cli-service: ~4.2.0 => 4.2.2 
    @vue/cli-shared-utils:  4.2.2 
    @vue/component-compiler-utils:  3.1.1 
    @vue/preload-webpack-plugin:  1.1.1 
    @vue/web-component-wrapper:  1.2.0 
    typescript: ~3.7.5 => 3.7.5 
    vue: ^2.6.11 => 2.6.11 
    vue-class-component: ^7.2.2 => 7.2.3 
    vue-hot-reload-api:  2.3.4 
    vue-loader:  15.9.0 
    vue-property-decorator: ^8.3.0 => 8.4.0 
    vue-router: ^3.1.5 => 3.1.5 
    vue-style-loader:  4.1.2 
    vue-template-compiler: ^2.6.11 => 2.6.11 
    vue-template-es2015-compiler:  1.9.1 
  npmGlobalPackages:
    @vue/cli: Not Found