scss不编译:root

时间:2018-04-10 07:44:53

标签: sass vuejs2 webpack-2

档案a.scss:

$myVariable:#ffffff;

文件b.scss:

@import './a.scss';

 //does not work
:root{
   --root-variable:$myVariable; 
}

//works
.myClass{
    color:$myVariable; 
}

编辑器会在 b.scss 文件中看到 myVariable 的值。但是在页面上编译后,如果查看属性,它看起来像这样:

  

- 根变量:$ MYVARIABLE

但预计:

  

- 根变量:#FFFFFF

的WebPack:

{
  test: /\.vue$/,
  exclude: /(node_modules|bower_components)/,
  use: {
       loader: 'vue-loader',
       options: {
              loaders: {
                        scss: 'vue-style-loader!css-loader!sass-loader', // <style lang="scss">
                        sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax' // <style lang="sass">
                        }
                 }
        }


}

如何解决?

//UPDATE

我改变了问题,因为我发现了问题,但我仍然不知道如何解决它

1 个答案:

答案 0 :(得分:0)

对于现在遇到此问题的任何人,这都是由于Sass 3.5的更改is explained here

现在,在定义自定义CSS变量时使用Sass变量的操作需要稍有不同。这曾经起作用:

:root {
   --root-variable: $myVariable; 
}

但是现在您应该这样做:

:root {
   --root-variable: #{$myVariable}; 
}