vue-cli3 sass配置全局变量报错

Question

vue.config.js: styles和src同级

css: {
    loaderOptions: {
      postcss: {
        plugins: [
          // px2rem配置
          postcss,
        ]
      },
      sass: {
        data: `@import "./styles/variables.scss"`,
      }
    }
  },

报错信息:

INFO  Starting development server...
 98% after emitting CopyPlugin                                                   

 ERROR  Failed to compile with 3 errors                                                                                                                                                 13:49:12

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

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

<template>
                                ^
      Expected ";".
  ╷
1 │ @import "./styles/variables.scss"
  │                                  ^
  ╵
  stdin 1:34  root stylesheet
      in /Users/AAC/Public/vues/vuedemo/src/App.vue (line 1, column 34)

 @ ./node_modules/vue-style-loader??ref--8-oneOf-1-0!./node_modules/css-loader??ref--8-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref
--8-oneOf-1-2!./node_modules/sass-loader/lib/loader.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&t
ype=style&index=0&lang=scss& 4:14-415 14:3-18:5 15:22-423
 @ ./src/App.vue?vue&type=style&index=0&lang=scss&
 @ ./src/App.vue
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://192.168.0.107:8081/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

 error  in ./src/components/HelloWorld.vue?vue&type=style&index=0&id=469af010&scoped=true&lang=scss&

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

<template>
                                ^
      Expected ";".
  ╷
1 │ @import "./styles/variables.scss"
  │                                  ^
  ╵
  stdin 1:34  root stylesheet
      in /Users/AAC/Public/vues/vuedemo/src/components/HelloWorld.vue (line 1, column 34)

 @ ./node_modules/vue-style-loader??ref--8-oneOf-1-0!./node_modules/css-loader??ref--8-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref
--8-oneOf-1-2!./node_modules/sass-loader/lib/loader.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/components/He
lloWorld.vue?vue&type=style&index=0&id=469af010&scoped=true&lang=scss& 4:14-464 14:3-18:5 15:22-472
 @ ./src/components/HelloWorld.vue?vue&type=style&index=0&id=469af010&scoped=true&lang=scss&
 @ ./src/components/HelloWorld.vue
 @ ./src/router.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://192.168.0.107:8081/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

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

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

<template>
                                ^
      Expected ";".
  ╷
1 │ @import "./styles/variables.scss"
  │                                  ^
  ╵
  stdin 1:34  root stylesheet
      in /Users/AAC/Public/vues/vuedemo/src/views/Home.vue (line 1, column 34)

 @ ./node_modules/vue-style-loader??ref--8-oneOf-1-0!./node_modules/css-loader??ref--8-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_modules/sass-loader/lib/loader.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/views/Home.vue?vue&type=style&index=0&lang=scss& 4:14-434 14:3-18:5 15:22-442
 @ ./src/views/Home.vue?vue&type=style&index=0&lang=scss&
 @ ./src/views/Home.vue
 @ ./src/router.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://192.168.0.107:8081/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

Answer 1

问题解决了没想到时这问题....data: @import "./styles/variables.scss";,漏了分号,附带https://github.com/vuejs/vue-...

Answer 2

不都提示了嘛
Expected ";".
你漏了句尾分号。