1. Install scss
npm install node-sass sass-loader --save-dev
npm install style-loader css-loader --save-dev
2. Locate webpack.base.conf.js in the build file, configuration is as follows:
{ test: /\.vue$/, loader: 'vue-loader', // options: vueLoaderConfig, options: { loaders: { 'scss': 'style-loader!css-loader!sass-loader' } }
{ Test: /\.scss$/, loaders to: [ "style", "CSS", "Sass"] // can not be chaotic sequence }
3. feel so ok, but running, error
Module build failed: TypeError: this.getResolve is not a function at Object.loader (C:\Users\BigBear\Desktop\vue_admintest\node_modules\[email protected]@sass-loader\dist\index.js:52:26) @ ./node_modules/[email protected]@style-loader/dist/cjs.js!./node_modules/css-loader!./node_modules/vue-loader/lib/style-compiler?
{"vue":true,"id":"data-v-7ba5bd90","scoped":true,"hasInlineConfig":false}!./node_modules/[email protected]@sass-loader/dist/cjs.js!./
node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue 2:26-345
In general this means that the current situation of sass-loader version is too high, it is down a little before on-line version
"sass-loader": "^8.0.2",
Now Version:
"sass-loader": "^7.0.2",