Welcome to MLink Developer Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
324 views
in Technique[技术] by (71.8m points)

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

在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:WebTestest01srccomponentsmyRadio.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

求解! 谢谢!!!


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

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

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


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to MLink Developer Q&A Community for programmer and developer-Open, Learning and Share
...