javascript - How can I fix ValidationError of Sass loader? - Stack Overflow

admin管理员组

文章数量:1415653

I was trying to add global scss variables to my Vue project. I found this example Globally load sass. So I created vue.config.js in my root folder of my Vue project then I copy & paste vue.config.js and change the data inport path and then when I am trying to serve my project I am getting this error :

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

I checked my package.json to just be sure that I have installed node-sass and sass-loader and I found those dependencies :

"devDependencies": {
    "@vue/cli-plugin-babel": "^4.1.0",
    "@vue/cli-plugin-router": "^4.1.2",
    "@vue/cli-service": "^4.1.0",
    "babel-eslint": "^10.0.3",
    "node-sass": "^4.12.0",
    "sass-loader": "^8.0.0",
    "vue-template-piler": "^2.6.10"
  }

So I am a little bit confused and I do not know what I am doing wrong. I also know that I can import those .scss variables to every vue ponent in which i am going to use them but i do not like this solution.

vue.config.js

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        data: `
          @import "@/style/index.scss";
        `
      }
    }
  }
};

Directory structure

I was trying to add global scss variables to my Vue project. I found this example Globally load sass. So I created vue.config.js in my root folder of my Vue project then I copy & paste vue.config.js and change the data inport path and then when I am trying to serve my project I am getting this error :

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

I checked my package.json to just be sure that I have installed node-sass and sass-loader and I found those dependencies :

"devDependencies": {
    "@vue/cli-plugin-babel": "^4.1.0",
    "@vue/cli-plugin-router": "^4.1.2",
    "@vue/cli-service": "^4.1.0",
    "babel-eslint": "^10.0.3",
    "node-sass": "^4.12.0",
    "sass-loader": "^8.0.0",
    "vue-template-piler": "^2.6.10"
  }

So I am a little bit confused and I do not know what I am doing wrong. I also know that I can import those .scss variables to every vue ponent in which i am going to use them but i do not like this solution.

vue.config.js

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        data: `
          @import "@/style/index.scss";
        `
      }
    }
  }
};

Directory structure

• javascript
• vue.js
• webpack
• sass
• vuejs2

Share Improve this question Follow edited Jan 5, 2020 at 21:17 custommander 19.1k66 gold badges6969 silver badges9393 bronze badges asked Jan 5, 2020 at 20:45 Krzysztof KaczyńskiKrzysztof Kaczyński 5,09166 gold badges3535 silver badges6161 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

Change data to prependData ...see the docs

本文标签： javascriptHow can I fix ValidationError of Sass loaderStack Overflow