vue2.0中加入scss编译支持出错

Question

在vue2.0中用vue-cli脚手架根据构建了一个项目，想加入scss的编译支持。但总是出错。具体步骤是：

已安装：

npm install --save-dev sass-loader
npm install --save-dev node-sass

在webpack.base.config.js中加入：

module: {
    rules: []
}    

具体内容是:

{
    test: /.vue$/,
    loader: 'vue-loader',
    options: {
      loaders: {
        'scss': 'style-loader!css-loader!sass-loader'
      }
    }
},

在file watch中已经加入了scss的支持，所以独立的scss文件可以编译。但如果在vue文件中加入变量则报错，具体代码是:

<style lang="scss" scoped type="text/css">
  @import "../assets/color.scss";
  $www: #00ff;
</style>

外部引用可以，外部的scss文件也可以用$变量形式。但在vue文件内用变量就是不行。

出错提示是：

 ERROR  Failed to compile with 1 errors11:22:10

 error  in ./src/components/myRadio.vue

Module build failed: 
undefined
     ^
      Invalid CSS after "$www:": expected expression (e.g. 1px, bold), was "#00ff;"
      in C:WebTesttest01srccomponentsmyRadio.vue (line 79, column 7)

 @ ./~/vue-style-loader!./~/css-loader?{"minimize":false,"sourceMap":false}!./~/vue-loader/lib/style-compiler?{"id":"data-v-0ccc97c2","scoped":true,"hasInlineConfig":false}!./~/sass-loader/lib/loader.js?{"sourceMap":false}!./~/vue-loader/lib/selector.js?type=styles&index=0!./src/components/myRadio.vue 4:14-382 13:3-17:5 14:22-390
 @ ./src/components/myRadio.vue
 @ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/components/Hello.vue
 @ ./src/components/Hello.vue
 @ ./src/router/index.js
 @ ./src/main.js
 @ multi ./build/dev-client ./src/main.js

求解！ 谢谢！！！

Answer 1

我在webstorm里面写scss的语法总是有错误提示，虽然不影响编译，但看着红色的波浪线挺恶心的，请问可以消除吗？

Answer 2

<style rel="stylesheet/scss" lang="sass">

这样写应该就好了

Answer 3

myRadio.vue 文件中，

Invalid CSS after "$www:": expected expression (e.g. 1px, bold), was "#00ff;"

16 进制颜色要么是 3 位要么是 6 位